Collapsible

The collapsible shows or hides a single region of content behind a trigger, with a height animation. Use it for "show more" toggles, optional form sections, or sidebar groups; for a stacked set of toggling sections, use Accordion instead.

Preview

Installation

npx shadcn@latest add @cubby-ui/collapsible

Usage


import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/cubby-ui/collapsible";


<Collapsible>
  <CollapsibleTrigger />
  <CollapsibleContent />
</Collapsible>

Composition


Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Examples

Controlled

Pass open and onOpenChange to manage the open state yourself.

Custom Trigger

Use the render prop on CollapsibleTrigger to drive it from your own element.

Custom Animation

Override the transition on CollapsibleContent using the --collapsible-panel-height CSS variable.

API Reference

The Collapsible component is built on top of Base UI's Collapsible. All Base UI props are supported and passed through unchanged on every part. Our implementation only adds default styling and animation, so there are no custom props or modified defaults.

For the complete Base UI API, including open, defaultOpen, and onOpenChange on the root, see the Base UI Collapsible documentation.