Show More

Basic

The ShowMore component is primarily used to encapsulate content that can be expanded or collapsed. It renders the content as initially hidden, and it expands to show more when interacted with by the user.

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

Anatomy

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

import { ChevronDownIcon } from "@heroicons/react"
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>

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.