Collapsible

Installation

npx shadcn@latest add @kanpeki/collapsible

Anatomy

import { Collapsible } from "~/components/ui/collapsible";

<Collapsible.Root>
  <Collapsible.Trigger>Is it accessible?</Collapsible.Trigger>
  <Collapsible.Content>
    Yes. It adheres to the WAI-ARIA design pattern.
  </Collapsible.Content>
</Collapsible.Root>;

Trigger

You can use the <Collapsible.Trigger /> component to create a button that toggles the visibility of the collapsible content, or you can use the <Button /> component as the trigger by passing it a slot="trigger" prop.

<Collapsible.Root>
  <Button slot="trigger" variant="ghost">
    Is it accessible?
  </Button>
  <Collapsible.Content>
    Yes. It adheres to the WAI-ARIA design pattern.
  </Collapsible.Content>
</Collapsible.Root>

Animation

The accordion uses the --disclosure-panel-height CSS variable to animate the height of the content area.