Show More

Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/show-more

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install react-aria-components tailwind-variants

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

import { ChevronDownIcon } from "@heroicons/react/20/solid"
import { ShowMore } from "@/components/ui/show-more"
import { twMerge } from "tailwind-merge"

<ShowMore>
  {({ isSelected }) => (
    <>
      Show {isSelected ? "less" : "more"}
      <ChevronDownIcon
        className={twMerge(
          isSelected ? "rotate-180" : "",
          "size-4 transition-transform duration-200"
        )}
      />
    </>
  )}
</ShowMore>

Examples

As text

While the default behavior utilizes a button for interactions, the ShowMore component can also be configured to function as a clickable text element.

Controlled

Gain fine-grained control over the ShowMore component's behavior. This setup ensures you can manage the expanded state externally, ideal for more complex interactions.

Orientation

The default orientation for the ShowMore component is horizontal. However, it can easily be adjusted to a vertical layout to suit different design needs.

Component API

The ShowMore component expands and collapses overflowing content.

See the React Aria for the full API reference.