Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Subtitle

Accordion with Icons and Subtitle Text for React

An accordion of workspace sections where each trigger pairs a category icon with a title and a line of muted subtitle text.

Framework
UI library

An icon, a title and a muted subtitle on every trigger give each section a quick summary. This React accordion stacks the title over the subtitle beside the icon and keeps the built-in chevron on the right. Use it when the sections need a word of context, such as what kind of files they hold, before anyone opens them.

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.

How is the subtitle marked up?

The title and subtitle stack in flex flex-col items-start text-start beside the icon. The subtitle is text-sm text-muted-foreground. 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.

How do the row borders meet?

-space-y-px on Accordion pulls the rows together so neighboring borders share one line. Each AccordionItem has border, px-4, first:rounded-t-lg and last:rounded-b-lg.

All 21 accordion examples