Shadcn.io is not affiliated with official shadcn/ui
Standard with Left Chevron
An accordion with left-aligned chevron indicators using flex-row-reverse for action-first navigation patterns
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.
Standard with Left Chevron preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.