Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Tabs

Tab-Style Accordion with Plus Trigger for React

An accordion of team questions drawn as separate rounded cards, with a plus/minus toggle on the right of each trigger.

Framework
UI library

Rounded cards for each team question, with a plus on the right that turns into a minus when the card opens. This React accordion hides the built-in chevron and keeps a gap between cards. Use it for team, billing or feature FAQs where each answer stands alone.

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 are the sections separated?

Accordion is flex flex-col gap-2. Each AccordionItem has its own rounded-lg border and px-4.

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.

Where does the answer sit?

AccordionContent adds no padding class of its own. The item px-4 insets the paragraph with the title, and justify-between keeps the plus and minus at the end of the trigger.

Why does the invite question start open?

defaultValue={["invite"]} opens the invite question 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.

Is keyboard navigation built in?

Yes. Each trigger is a button with aria-expanded and aria-controls, and Enter or Space toggles it. The arrow keys move between triggers, and Home and End jump to the first and last.

All 21 accordion examples