KQ-007 · DRAWER/ACCORDION
Drawer Accordion
Opens like a specimen cabinet — height glides while the inner content lags a beat behind, like paper settling in a pulled drawer.
KQ-007 · DRAWER/ACCORDION
Keep sealed units between 10–24 °C at under 60% relative humidity. Handle with lined gloves; bare contact leaves residue on the actuator housing.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/drawer-accordion
Props
- type
- "single" | "multiple"
- default "single"
- Open one drawer at a time, or many.
- value / defaultValue
- string | string[]
- default —
- Controlled or uncontrolled open value(s).
- onValueChange
- (value) => void
- default —
- Fires with the next open value(s).
- collapsible
- boolean
- default true
- Single mode: allow closing the open item.
- Item.value / Item.disabled
- string / boolean
- default —
- Unique drawer id; disabled items are skipped in arrow navigation.
- Trigger.icon
- ReactNode
- default —
- Leading icon slot before the header label.
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Open one drawer at a time, or many. |
| value / defaultValue | string | string[] | — | Controlled or uncontrolled open value(s). |
| onValueChange | (value) => void | — | Fires with the next open value(s). |
| collapsible | boolean | true | Single mode: allow closing the open item. |
| Item.value / Item.disabled | string / boolean | — | Unique drawer id; disabled items are skipped in arrow navigation. |
| Trigger.icon | ReactNode | — | Leading icon slot before the header label. |