Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Standard

Full Featured Accordion for React

An accordion of workspace sections where each trigger has a category icon, a title over a short subtitle, and a plus/minus toggle.

Framework
UI library

Everything at once: a category icon, a title over a muted subtitle, and a plus/minus toggle on every trigger. This React accordion hides the built-in chevron and draws the toggle on the right, so each row says what it holds, what is inside, and that it opens. Use it for dense dashboards and workspace navigation.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What is inside each trigger?

A gap-3 row holds the category icon and a stack of the title over the subtitle. justify-between pushes the plus and minus to the end. The icon is FileTextIcon, FolderIcon, SettingsIcon or UsersIcon, at size-4 with aria-hidden.

How does the plus turn into a minus?

**:data-[slot=accordion-trigger-icon]:hidden on AccordionTrigger hides the built-in chevron. PlusIcon and MinusIcon share one relative size-4 box, and group-aria-expanded/accordion-trigger fades the plus out and the minus in over duration-200. Both icons are aria-hidden and text-muted-foreground.

How is the subtitle marked up?

The subtitle is text-sm text-muted-foreground under the title, in flex flex-col items-start text-start. Documents uses Contracts, invoices and briefs.

Why is the answer indented?

ps-7 on AccordionContent matches the 16px icon plus the 12px gap-3, so the answer lines up under the title.

Why does Documents start open?

defaultValue={["documents"]} opens Documents on first render. The string matches that item's value.

How do I let several items stay open at once?

One open item is the default. Add multiple to Accordion to let several stay open, and list every item that should start open in the defaultValue array.

All 21 accordion examples