React Accordion - Tabs with Left Chevron
A tab-style accordion with left-aligned chevron indicators using flex-row-reverse for action-first card navigation
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-4.jsonRelated patterns you will also like
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
Questions you might have
React Accordion - Tabs with Plus Trigger
A tab-style accordion with right-aligned plus/minus indicators and card-like separation for bold, expandable sections
React Alert Dialog - Simple Confirmation Dialog
A simple confirmation dialog with Cancel and Continue actions for critical user decisions requiring explicit confirmation