Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Subtitle

Accordion with Icon, Subtitle, and Chevron for React

An accordion of workspace sections where each trigger has a category icon, a title over a short subtitle, and the chevron on the right.

Framework
UI library

Each row here says three things before it opens: an icon for the kind of content, a title, and a muted subtitle that lists what the section holds. This React accordion keeps the chevron that AccordionTrigger draws on the right, and the Documents section starts open. Use it for dashboards and settings where people pick a section by more than its name.

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

Where do the category icons come from?

Each item stores FileTextIcon, FolderIcon, SettingsIcon or UsersIcon. The trigger renders it at size-4 with text-muted-foreground, shrink-0 and aria-hidden, in a gap-3 row before the text.

Where is the chevron?

AccordionTrigger draws its own chevron on the right. This trigger does not hide accordion-trigger-icon, and hover:no-underline is set on the trigger.

How is the subtitle marked up?

Title and subtitle stack in flex flex-col items-start text-start. The subtitle is text-sm text-muted-foreground.

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