Collapsible
@/components/kamod-ui/collapsible
Order #4189
Installation
Import Collapsible, CollapsibleTrigger and CollapsibleContent from `@/components/kamod-ui/collapsible`.
pnpm add @kamod-ch/uiUsage
Wrap trigger and content. Use open and onOpenChange for controlled state. Use CollapsibleTrigger asChild with Button for icon toggles. CollapsibleContent animates height (respects prefers-reduced-motion).
import { Collapsible } from "@/components/kamod-ui/collapsible";<Collapsible />Demo
Controlled order card with ghost icon trigger (shadcn CollapsibleDemo).
Usage
Minimal default button trigger and unstyled content.
Controlled state
Use open and onOpenChange to control visibility from outside.
Basic
Card with full-width ghost trigger and rotating chevron (shadcn Basic).
Settings panel
Extra fields in a subgrid with maximize/minimize trigger (shadcn Settings).
File tree
Nested collapsibles with folder chevrons and Tabs header (shadcn File Tree).
API Reference
Props, slots and variants for this component.
Collapsible
Collapsible component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| defaultOpen | boolean | false |
| open | boolean | — (uncontrolled) |
| onOpenChange | (open: boolean) => void | — |
| CollapsibleTrigger asChild | boolean | false |
| CollapsibleContent forceMount | boolean | false |
| CollapsibleContent duration / timingFunction | string | 320ms / cubic-bezier… |
Accessibility Notes
Trigger exposes aria-expanded; content is aria-hidden and inert when closed. Provide sr-only labels on icon-only triggers.