KQ-094 · FOLD/OUT
Fold Out
An origami strip unfolding in staged hinges — one progress spring drives every crease, each panel's hinge mapped to a later slice of the travel so the sheet opens stage by stage with shading lifting as each fold flattens.
KQ-094 · FOLD/OUT
FIELD CHART · 04 FOLDS
KQ-094
FOLD 01 · LEGEND
symbols and scales
FOLD 02 · NORTH SPAN
masts 01 through 04
FOLD 03 · SOUTH SPAN
masts 05 through 08
FOLD 04 · NOTES
wind allowances, rev 3
CHART · FOLDED
Unfold the chart - each crease opens in its own stage.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/fold-out
Props
- panels
- ReactNode[]
- default —
- Up to four panels, unfolding top to bottom.
- open / defaultOpen / onOpenChange
- boolean / boolean / (open) => void
- default —
- Controlled or uncontrolled fold state.
- panelHeight
- number
- default 88
- Height of each panel in px.
- openLabel / closeLabel
- string / string
- default —
- Toggle wording.
| Prop | Type | Default | Description |
|---|---|---|---|
| panels | ReactNode[] | — | Up to four panels, unfolding top to bottom. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — | Controlled or uncontrolled fold state. |
| panelHeight | number | 88 | Height of each panel in px. |
| openLabel / closeLabel | string / string | — | Toggle wording. |