Collapsible
Hides extra content behind a simple toggle button, allowing users to expand and read details only when they need them.
1 KB
•Updated on August 21, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/primitives-collapsibleUsage
Code
import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from '@/components/ui/collapsible'Code
<Collapsible>
<CollapsibleTrigger>Can I access the file in the cloud?</CollapsibleTrigger>
<CollapsiblePanel>Yes, you can access the file in the cloud.</CollapsiblePanel>
</Collapsible>Anatomy
Code
<Collapsible>
<CollapsibleTrigger />
<CollapsiblePanel />
</Collapsible>Accessibility
- Adheres to the WAI-ARIA disclosure pattern with
aria-expandedstate updates.
Keyboard Interactions
| Key | Action |
|---|---|
| Space / Enter | Toggles the expanded state of the panel. |
API Reference
Collapsible
Root component. Alias for Collapsible.Root from Base UI.
CollapsibleTrigger
Trigger button that toggles the collapsible panel. Styled wrapper for Collapsible.Trigger from Base UI.
CollapsiblePanel
Collapsible content panel. Styled wrapper for Collapsible.Panel from Base UI with animated height transitions. Also exported as CollapsibleContent.