Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Subtitle

Accordion with Subtitle and Plus/Minus Toggle for React

A bordered accordion of help topics where each trigger shows a title over a muted subtitle and a plus that turns into a minus when it opens.

Framework
UI library

A muted subtitle under each title gives context before opening, and a plus/minus toggle makes the action plain. This React accordion hides the built-in chevron and draws its own toggle on the right of each help topic. Use it for help centers and settings where both the summary and the affordance matter.

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 under its title. They stack in flex flex-col items-start text-start, and the subtitle is text-sm text-muted-foreground.

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.

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?

AccordionItem has px-4, and AccordionContent adds no padding class of its own, so the paragraph lines up with the title. justify-between on the trigger row keeps the plus and minus at the end.

All 21 accordion examples