React Accordion - Standard with Left Chevron
An accordion with left-aligned chevron indicators using flex-row-reverse for action-first navigation patterns
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
When your users scan left-to-right, that chevron indicator arrives way too late. This React accordion flips the script with flex-row-reverse from Tailwind, putting the chevron on the left from shadcn/ui and Radix UI. It mirrors file explorer UX where the expand action comes before the label—perfect for navigation menus and sidebar content.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-2.jsonRelated patterns you will also like
Standard Accordion
Basic accordion with right-aligned chevrons
Standard with Left Plus Trigger
Same left-aligned concept with plus/minus indicators
Multi-level with Left Plus Trigger
Nested accordion with left-aligned indicators
Accordion Tabs with Plus Trigger
Tab-style accordion with left indicators
Sidebar Navigation
Navigation menu with left-aligned expand controls
Standard with Plus Trigger
Accordion with plus/minus on right side
Questions you might have
React Accordion Standard
A basic accordion component with default chevron indicators on the right side, perfect for simple collapsible content sections
React Accordion - Standard with Plus Trigger
An accordion using bold plus/minus toggle indicators instead of chevrons for more prominent expand/collapse affordance