layout/@mihcm/ui·v0.21.0·stable
Collapsible
Simple expand/collapse panel powered by Radix. Single toggle — no item/group semantics like Accordion.
Props
The full prop API for Collapsible. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.
| Prop | Type | Default | Description | Since |
|---|---|---|---|---|
open | boolean | — | Controlled open state. | 0.5.0 |
onOpenChange | (open: boolean) => void | — | Open state change handler. | 0.5.0 |
defaultOpen | boolean | false | Initial open state (uncontrolled). | 0.5.0 |
disabled | boolean | — | Prevent toggling. | 0.5.0 |
variant | 'plain' | 'ghost' | 'outline' | 'soft' | 'plain' | Trigger visual style. On CollapsibleTrigger. | 0.10.1 |
size | 'auto' | 'sm' | 'md' | 'lg' | 'icon' | 'auto' | Trigger size preset. On CollapsibleTrigger. | 0.10.1 |
justify | 'start' | 'center' | 'between' | 'center' | Trigger child alignment. On CollapsibleTrigger. | 0.10.1 |
fullWidth | boolean | false | Make the trigger fill the parent width. On CollapsibleTrigger. | 0.10.1 |
rotateIcon | boolean | true | Rotate the last direct SVG child when open. On CollapsibleTrigger. | 0.10.1 |
duration | 'fast' | 'normal' | 'slow' | 'normal' | Motion speed: 300ms, 500ms, or 700ms with smooth easing. On CollapsibleContent. | 0.10.1 |
animation | 'height' | 'fade' | 'none' | 'height' | Open/close animation style. On CollapsibleContent. | 0.10.1 |
content variant | 'plain' | 'panel' | 'card' | 'inset' | 'plain' | Content surface style. On CollapsibleContent. | 0.10.1 |
padding | 'none' | 'sm' | 'md' | 'lg' | 'none' | Content padding preset. On CollapsibleContent. | 0.10.1 |
className | string | — | Additional Tailwind classes. Stable trigger defaults are merged to prevent trigger jumps. | 0.10.1 |
Import
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@mihcm/ui/Collapsible';