KQ-564 · UNFOLD/CARD

Unfold Card

A list of cards that open where they stand. Clicking one unfolds its detail directly beneath its summary, the container animating to a height a ResizeObserver actually measured on glide, so nothing is reserved while the card is folded and nothing below it jumps when it opens; the cards that stay folded ease back in opacity, a lighting change rather than a movement, and the chevron turns on snap. Only one card is open at a time, each summary is a button carrying aria-expanded and aria-controls, and Escape folds the open card and returns focus to its summary.

KQ-564 · UNFOLD/CARD

Basinworks listings

Tenure: Freehold
Built: 1912
Heating: Air source
Council band: C

Open · Mill Row 4

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/unfold-card

Props

items: { id: string; summary: React.ReactNode; detail: React.ReactNode }[]; default —; The cards, in reading order. The summary is always visible; the detail is revealed beneath it.
open / defaultOpen: string | null; default —; Controlled or initial open id; null folds everything.
onOpenChange: (id: string | null) => void; default —; Fires with the id that opened, or null when everything folds.
label: React.ReactNode; default —; Visible list label. Omit it and pass aria-label to name the list invisibly.

Prop	Type	Default	Description
items	{ id: string; summary: React.ReactNode; detail: React.ReactNode }[]	—	The cards, in reading order. The summary is always visible; the detail is revealed beneath it.
open / defaultOpen	string \| null	—	Controlled or initial open id; null folds everything.
onOpenChange	(id: string \| null) => void	—	Fires with the id that opened, or null when everything folds.
label	React.ReactNode	—	Visible list label. Omit it and pass aria-label to name the list invisibly.