Collapsible
An interactive component that toggles the visibility of a content panel, built on Radix UI's Collapsible primitive.
Install
npx shadcn@latest add https://atomx.acau.net/r/collapsible.jsonUsage
Collapsible wraps Radix UI's Collapsible.Root. Place any element as CollapsibleTrigger — it toggles the CollapsibleContent. Use open and onOpenChange for controlled mode, or let it manage state internally.
<Collapsible>
<CollapsibleTrigger asChild>
<Button variant="outline">Toggle</Button>
</CollapsibleTrigger>
<CollapsibleContent>
<p>This content is revealed when open.</p>
</CollapsibleContent>
</Collapsible>Preview
Props
Collapsible extends React.ComponentProps<typeof CollapsiblePrimitive.Root>.
| Prop | Type | Notes |
|---|---|---|
open | boolean | Controlled open state. |
defaultOpen | boolean | Initial open state when uncontrolled. |
onOpenChange | (open: boolean) => void | Fired when open state changes. |
disabled | boolean | Prevents toggle interaction. |
CollapsibleTrigger and CollapsibleContent forward all props to their Radix primitives.
Checkbox
A control that allows the user to toggle between checked and not checked, built on Radix UI's Checkbox primitive.
Combobox
A searchable single-select input composed from Popover and Command — atomx ships it as a ready-to-use block so you get a consistent API instead of assembling the primitives yourself.