Display
Collapsible
Show and hide one region. Unstyled: the trigger and panel look like whatever you render.
packages/design-system/components/ui/collapsible.tsx
Examples
Anatomy
- 01Root
- 02Trigger
- 03Panel
Usage
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@repo/design-system/components/ui/collapsible";
<Collapsible open={open} onOpenChange={setOpen}>
<CollapsibleTrigger render={<Button variant="ghost" size="sm" />}>Show details</CollapsibleTrigger>
<CollapsibleContent>...</CollapsibleContent>
</Collapsible>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open / defaultOpen | boolean | none | Controlled or uncontrolled open state, on the root. |
| onOpenChange | (open: boolean, details) => void | none | Called when the popup opens or closes. |
| CollapsibleTrigger render | ReactElement | (props, state) => ReactElement | none | Base UI's replacement for asChild: render the part as another element, such as a Button or a Link. |
| className | string | none | Merged last with cn(). Use it for layout (width, margin), not to restyle the component. |
Guidance
Do
- Say in the trigger what opening it will show.
Don't
- Use several in a row for FAQs. That is an accordion.