Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Subtitle

Accordion with Subtitle Text for React

A bordered accordion of help topics where each trigger shows a title over a muted subtitle, with the chevron on the right.

Framework
UI library

A line of muted text under each title tells readers what is inside before they open it. This React accordion stacks a title and a subtitle in each trigger and keeps the built-in chevron on the right. Use it for help topics, documentation sections and settings groups.

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

How is the subtitle marked up?

Each item stores a subtitle string under its title. The trigger puts them in a flex flex-col items-start text-start stack, and the subtitle is text-sm text-muted-foreground.

Why does the trigger set hover:no-underline?

hover:no-underline is on AccordionTrigger, so hovering the two-line heading does not underline it. The built-in chevron stays, because this trigger leaves accordion-trigger-icon visible.

Why does Getting started start open?

defaultValue={["getting-started"]} opens Getting started 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.

Where does the answer sit relative to the subtitle?

AccordionItem has px-4, and AccordionContent adds no padding class of its own, so the paragraph lines up with the title and the subtitle. The paragraph is text-muted-foreground.

All 21 accordion examples