Shadcn.io is not affiliated with official shadcn/ui
Tabs with Left Chevron
A tab-style accordion with left-aligned chevron indicators using flex-row-reverse for action-first card navigation
Most tab-style accordions put indicators on the right. This React accordion flips that with flex-row-reverse from Tailwind, placing chevrons on the left within shadcn/ui and Radix UI card-style sections. The gap-2 spacing and rounded-lg corners create distinct cards where the expand action comes first—perfect for navigation panels or sidebar content where interaction precedes reading.
Tabs with Left Chevron preview
Installation
Related Components
Tabs Accordion
Tab-style with right-aligned chevrons
Standard with Left Chevron
Left chevron with connected borders
Tabs with Left Plus Trigger
Tab style with left-aligned plus/minus
Tabs with Plus Trigger
Tab style with right-aligned plus/minus
Sidebar Navigation
Navigation menu with left indicators
Collapsible Card
Single collapsible card
FAQ
Was this page helpful?
Sign in to leave feedback.