Show More

ToggleButton

Installation

Add the component with the CLI.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/show-more

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

button text

Manual installation

Install the dependencies, then copy the component source into your project.

npm

pnpm

yarn

bun

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 { cn } from "cn"

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