Accordion

Collapsible sections. Free, MIT · Data and metrics › Lists and trees

Installation

npx valyro-cli@latest add accordion

npx shadcn@latest add https://valyro.xyz/r/accordion.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Accordion } from 'valyro-ui';

Prop	Type	Default
`items`	`readonly AccordionItem[]`		Sections in order: `title` is the trigger, `content` the panel, `value` the id used by `value`. Or compose them as children: `Accordion.Item` with an `Accordion.Trigger` and an `Accordion.Content`.
`children`	`ReactNode`		The compound form instead of `items`: `Accordion.Item` elements.
`type`	`'single' \| 'multiple'`	`'single'`	`single` keeps at most one section open.
`collapsible`	`boolean`	`true`	In `single` mode, whether the open section can be closed again.
`value`	`string[]`		Values of the open sections.
`defaultValue`	`string[]`	`[]`	Initial `value` when uncontrolled.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`3`	Level of the heading around each trigger, to fit the page's heading outline. Default 3.
`onValueChange`	`(value: string[]) => void`		Called with the new `value` when it changes.
`animation`	`'default' \| 'spring'`	`'default'`	`spring`: sections open on a critically damped spring, the content drops in as it is revealed and the chevron turns with a bounce. `default`: the theme's curve.

Accordion.Item (AccordionItemPart), Accordion.Trigger (AccordionTrigger), Accordion.Content (AccordionContent)