Collapsible
Expandable content sections
Toggle content visibility with smooth animations.
Collapsible
Controlled component with state:
Hidden content that appears when expanded. Supports any content including code blocks and components.
Default open
Start expanded:
This content is visible on page load
Details
Native HTML details element with styled appearance:
Click to expand
Lightweight alternative using native browser behavior
When to use
| component | use case |
|---|---|
| Collapsible | Controlled state, React integration |
| Details | Simple toggle, no JavaScript needed |
Props
Collapsible
| prop | type | default | description |
|---|---|---|---|
| title | string | - | Header text |
| defaultOpen | boolean | false | Initial state |
| children | ReactNode | - | Content |
Details
| prop | type | default | description |
|---|---|---|---|
| summary | string | - | Header text |
| children | ReactNode | - | Content |