Collapse
A headless collapsible primitive that mirrors Radix’s Root / Trigger / Content structure while exposing data attributes and CSS variables for complete animation control.
Anatomy
Import only the parts you need and compose them freely.
API Reference
Root
Provides controlled/uncontrolled open state, handles disabled logic, and wires the ARIA relationships between trigger and content.
| Prop | Type | Default |
|---|---|---|
| open | boolean | - |
| defaultOpen | boolean | false |
| onOpenChange | function | - |
| disabled | boolean | false |
| triggerId | string | auto |
| contentId | string | auto |
| Data Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
| data-disabled | "" |
Trigger
The interactive button tied to the root. Automatically exposes
data-state, data-disabled, and aria-expanded.| Prop | Type | Default |
|---|---|---|
| type | string | button |
| disabled | boolean | - |
| onClick | React.MouseEventHandler<HTMLButtonElement> | - |
| Data Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
| data-disabled | "" |
Content
Measured surface that can stay mounted via
forceMount and exposes --collapse-content-height / --collapse-content-width for transitions.| Prop | Type | Default |
|---|---|---|
| forceMount | boolean | false |
| Data Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
| data-disabled | "" |
| CSS Variable | Description |
|---|---|
| --collapse-content-width | The width of the content when it opens/closes. |
| --collapse-content-height | The height of the content when it opens/closes. |
Example
Animating content size
Use
--collapse-content-height / --collapse-content-width to animate the size of the content.