Collapsible

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/collapsible

UsageCopy Anchor Link

import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";

<Collapsible>
  <CollapsibleTrigger>Show recovery codes</CollapsibleTrigger>
  <CollapsiblePanel>4829-1735-6621</CollapsiblePanel>
</Collapsible>;

CollapsibleTrigger is an unstyled <button>, so style it yourself. Use the data-panel-open attribute to style the open state, like rotating a chevron.

Button triggerCopy Anchor Link

Use render to make a Button the trigger. Give icon-only triggers an aria-label.

AccessibilityCopy Anchor Link

The trigger gets aria-expanded and aria-controls for you. Enter and Space toggle it.

API referenceCopy Anchor Link

Each part accepts every prop of its Base UI Collapsible part: Collapsible is Collapsible.Root, CollapsibleTrigger is Collapsible.Trigger, and CollapsiblePanel is Collapsible.Panel. CollapsiblePanel is also exported as CollapsibleContent.

The most common Collapsible props: