Accordion

A stack of collapsible sections (sidebar groups, "view all"). Single or multiple open; panels animate their height via the grid-rows 0fr→1fr technique. Headers carry aria-expanded / aria-controls.

Installation

npm install @crisp-ui-kit/crisp

Props

Controlled or uncontrolled

Seed it with defaultValue and let it manage itself, or pass value + onValueChange to own the open set — the same pair Tabs and Select take.

onValueChange fires on every toggle in both modes, so you can observe what the user opened without taking control. It emits the shape the mode implies: string[] when multiple, otherwise the open value, or "" once the last panel closes.

const [open, setOpen] = useState<string | string[]>("billing");

<Accordion
  items={items}
  value={open}
  onValueChange={setOpen}
/>