Accordion
Stacked, collapsible sections — from data in one line, or composed when a row needs its own markup.
Loading documentation…
Powered by heyo
Accordion stacks sections that open one at a time. It is bounded by a
hairline top and bottom and separated by one between rows — no cards, no gaps,
no second background. A list of collapsible sections is a list, and a list
reads best as one block.
Only one section is open at a time by default; pass multiple when the
sections are independent rather than alternatives.
Use the subcomponents when a row needs an icon, custom markup, or anything richer than a title and a body.
bun run build — 14s, cached.
The items shorthand and composition are interchangeable — items simply
builds the same subcomponents for you.
One section instead of several. Accordion manages a group; Collapsible
manages a single disclosure and has no chrome of its own, so it fits inside
whatever you are already building.
DATABASE_URL=…
The sidebar has its own collapsible wired to the rail animation —
Sidebar.Collapsible. Use that one inside a menu.
Set chevron={false} when the row already carries its own affordance — a
switch, a badge, a count.
Shorthand that builds every item, trigger and panel from data. Each entry
takes title, children, and optionally value, icon and disabled.
Allows several sections to be open at once. It defaults to false.
The sections open on first render, by value.
The controlled open sections. Pair it with onValueChange.
Fires whenever a section opens or closes.
Ignores interaction on every row.
Keeps closed panels in the DOM. It defaults to false.
Lets the browser's in-page search find and expand a closed panel.
Merged into the outer list.
A leading glyph: a component, an element, or any node.
Draws the rotating chevron. It defaults to true.
The row's content. Anything after the label is pushed to the right edge.
The item's identity, used by value and defaultValue. It falls back to
the index.
Locks a single row.
Accordion.Content renders the panel body and animates its own height.
Open on first render.
The controlled state. Pair it with onOpenChange.
Fires when the section opens or closes.
On Collapsible.Trigger, swaps the button for anything else — usually a
Button.