Data display · Application UI
Collapsible
Expand/collapse region with trigger and animated panel.
@byronwade/foundation@byronwade/utils@base-ui/react
Feature showcase
Installation
Features
5 examples
Default, Uncontrolled, Disabled, Faq, With Rich Content.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | Controlled open state of the panel. |
| defaultOpen | boolean | false | Uncontrolled initial open state. |
| onOpenChange | (open: boolean) => void | - | Fires when the open state changes. |
| disabled | boolean | false | Disable the trigger. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @base-ui/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/collapsible.tsx |
| Default example | content/examples/collapsible/default.tsx |
| Uncontrolled example | content/examples/collapsible/uncontrolled.tsx |
| Disabled example | content/examples/collapsible/disabled.tsx |
| Faq example | content/examples/collapsible/faq.tsx |
| With Rich Content example | content/examples/collapsible/with-rich-content.tsx |