Atelier UI

Search components…

Search components…

Accordion

Single or multiple accordion with smooth grid-rows height animation, chevron rotation and full keyboard navigation.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

AccordionProps

Also accepts all props of Omit<React.ComponentProps<"div">, "defaultValue" | "onChange">

PropTypeDefaultDescription
items* requiredAccordionItemData[]——
type"single" | "multiple""single""single" keeps one panel open at a time, "multiple" allows many
defaultValuestring[][]—
valuestring[]—Controlled open values
onValueChange(value: string[]) => void——

Install

$ npx shadcn@latest add https://chromotion.dev/r/accordion.json

More like this