Collapsible
A disclosure that shows and hides a region of content.
Overview
Collapsible is the surface-less disclosure primitive: a trigger wired to a
content region with aria-expanded and data-open / data-closed. The root
and trigger render no surface of their own — pair the trigger with kit
components (an IconButton, a text Button) and style them per use.
The panel does one thing for you: it animates. CollapsibleContent transitions
its height to and from the primitive's measured value while the content
cross-fades, tuned with the kit's strong ease-out (200ms, interruptible, dropped
under reduced motion). Anything you pass in slots into that animated region and
inherits on-surface text — your className describes the content, not the
height-clipped shell. For grouped, pre-styled panels use Accordion.
@morpha starred 3 repositories
$ npx morpha-ui add collapsibleInstallation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add collapsible. In the meantime, since this is the base shadcn component, you
can also add it directly:
npx shadcn@latest add collapsibleAPI Reference
Prop
Type
Accessibility
- The trigger exposes
aria-expandedandaria-controls, handled by the Base UI primitive. - Keyboard: Space/Enter on the trigger toggles the region.
- Keep essential content outside the collapsed region — hidden content is removed from the accessibility tree by default.
- The height and cross-fade transitions are disabled under
prefers-reduced-motion.