Collapsible
a collapsible section for revealing or hiding content
Loading...
Installation
pnpm dlx shadcn@latest add https://prototyper-ui.com/r/collapsible.jsonnpx shadcn@latest add https://prototyper-ui.com/r/collapsible.jsonyarn dlx shadcn@latest add https://prototyper-ui.com/r/collapsible.jsonbunx --bun shadcn@latest add https://prototyper-ui.com/r/collapsible.jsonThis will add the following files to your project:
components/ui/collapsible.tsx
Usage
import {
Collapsible,
CollapsibleTrigger,
CollapsibleContent,
} from "@/components/ui/collapsible"
<Collapsible>
<CollapsibleTrigger>Toggle</CollapsibleTrigger>
<CollapsibleContent>
Content that can be collapsed or expanded.
</CollapsibleContent>
</Collapsible>Anatomy
<Collapsible>
<CollapsibleTrigger />
<CollapsibleContent>
{/* your content */}
</CollapsibleContent>
</Collapsible>| Sub-component | data-slot | Purpose | Required |
|---|---|---|---|
Collapsible | collapsible | Root provider, manages open/close state | Yes |
CollapsibleTrigger | collapsible-trigger | Button that toggles the collapsible panel | Yes |
CollapsibleContent | collapsible-content | The panel that is shown or hidden | Yes |
Examples
Disabled
Loading...
Styling
Data Slots
Use data-slot attributes to target specific parts of the collapsible:
| Slot name | Element |
|---|---|
collapsible | Root provider (wrapping element) |
collapsible-trigger | The trigger button |
collapsible-content | The collapsible panel |
Customization Examples
/* Animate the collapsible panel height */
[data-slot="collapsible-content"] {
overflow: hidden;
transition: height 250ms var(--ease-out-fluid);
}
[data-slot="collapsible-content"][data-open] {
height: var(--collapsible-panel-height);
}
[data-slot="collapsible-content"][data-closed] {
height: 0;
}{/* Override styling via className */}
<CollapsibleContent className="mt-4 space-y-2">
{/* ... */}
</CollapsibleContent>API Reference
Collapsible
Root component that manages the open/close state of the collapsible section.
Prop
Type
All Base UI Collapsible.Root props are forwarded via ...props.
CollapsibleTrigger
Button that toggles the collapsible panel open and closed.
Prop
Type
All Base UI Collapsible.Trigger props are forwarded via ...props.
CollapsibleContent
The panel that is shown or hidden when the collapsible is toggled.
Prop
Type
All Base UI Collapsible.Panel props are forwarded via ...props.
Accessibility
Keyboard Interactions
| Key | Action |
|---|---|
Space | Toggles the collapsible panel |
Enter | Toggles the collapsible panel |
Tab | Moves focus to / away from the trigger |
ARIA Attributes
CollapsibleTriggerrenders as a<button>element witharia-expandedreflecting the open state.aria-controlson the trigger is automatically linked to theCollapsibleContentpanel.CollapsibleContenthasrole="region"for screen reader discoverability.- When
disabledis set, the trigger receives thedisabledattribute and interaction is prevented.