Containers

Accordion

No consumers

Collapse long content into labelled sections the reader opens on demand.

Importimport { Accordion } from "@/components/ui/Accordion";
Sourcesrc/components/ui/Accordion

For content a reader will want some of. If they need all of it, an accordion just adds clicks; if they need one part and you know which, do not hide it behind a trigger.

Single

The default: opening one section closes the others. defaultValue takes an array of item values even in single mode.

Title, description and social preview.

Multiple

Display, direction, alignment.
Family, size, weight, tracking.

Props

Accordion

PropTypeDefaultDescription
type"single" | "multiple""single"Whether more than one item can be open at once.
defaultValuestring[][]Item values open on first render.

AccordionItem

PropTypeDefaultDescription
valuestringRequired. Identifies the item to the accordion's open set.