Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Tabs

Tab-Style Accordion for React

An accordion of account questions drawn as separate rounded cards with a gap between them, one open at a time.

Framework
UI library

Not every accordion has to be one connected block. This React accordion draws each account question as its own rounded card, with a gap between them and the built-in chevron on the right. Use it for FAQs and settings where each section should feel separate.

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, so each row has its own border. Each AccordionItem has rounded-lg border and px-4.

Which chevron is this?

AccordionTrigger is used with the title only, so it draws the built-in chevron on the right. This demo does not hide accordion-trigger-icon.

Why does the email question start open?

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

How wide is the stack?

Accordion sets w-full max-w-md. The items stretch to that width, and overflow-hidden on each item keeps the open answer inside the rounded border.

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