The Collapsible component allows content to be expanded and collapsed with smooth animations.
Installation
import {
Collapsible,
CollapsibleTrigger,
CollapsiblePanel,
} from "@craftdotui/baseui/components/collapsible";
<Collapsible>
<CollapsibleTrigger>Toggle Content</CollapsibleTrigger>
<CollapsiblePanel>
This content can be collapsed and expanded.
</CollapsiblePanel>
</Collapsible>
Components
Collapsible (Root)
Callback when state changes.
CollapsibleTrigger
The trigger button to toggle the panel. Includes a chevron icon that rotates when open.
CollapsiblePanel
Keep panel mounted when closed.
Use hidden=until-found attribute.
Examples
Basic Collapsible
<Collapsible>
<CollapsibleTrigger>Show more</CollapsibleTrigger>
<CollapsiblePanel>
<p>Additional content that can be toggled.</p>
</CollapsiblePanel>
</Collapsible>
Controlled
const [open, setOpen] = useState(false);
<Collapsible open={open} onOpenChange={setOpen}>
<CollapsibleTrigger>Toggle</CollapsibleTrigger>
<CollapsiblePanel>
Content
</CollapsiblePanel>
</Collapsible>
Default Open
<Collapsible defaultOpen>
<CollapsibleTrigger>Details</CollapsibleTrigger>
<CollapsiblePanel>
This content is open by default.
</CollapsiblePanel>
</Collapsible>
Accessibility
- Built on @base-ui/react for accessibility
- Keyboard accessible (Enter/Space to toggle)
- Proper ARIA attributes
- Smooth height transitions
- Focus management