Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Standard

Accordion with Left Chevron for React

A bordered accordion of shipping questions with the chevron moved to the start of each trigger, before the title.

Framework
UI library

A chevron before the title, like a file tree, puts the toggle where the eye lands first. This React accordion reverses the trigger's row with flex-row-reverse, so the built-in chevron moves to the start, and indents the answers to line up with the titles. The direction follows the page, so it stays at the start in right-to-left layouts. Use it for navigation-like lists and sidebars.

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 does the chevron move to the start of the row?

flex-row-reverse on AccordionTrigger places the built-in chevron before the title, with gap-3 between them. The title sits in flex-1 text-start, and the trigger also sets px-4 py-3 and hover:no-underline.

Why does the answer use ps-11?

ps-11 lines the answer up under the title: the trigger padding, the chevron, and gap-3. px-4 on AccordionContent sets the end padding, ps-11 sets the start, and pb-4 pads the bottom.

Why does the shipping question start open?

defaultValue={["shipping"]} opens the shipping 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 do the row borders meet?

-space-y-px on Accordion makes neighboring borders share one line. Each AccordionItem has border, first:rounded-t-lg and last:rounded-b-lg. Horizontal padding is on the trigger and the content.

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