React Accordion - Tabs with Left Plus Trigger
A tab-style accordion with left-aligned plus/minus indicators and visual separation between items for card-like expandable sections
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Standard accordions stack tight with connected borders. This React accordion breaks them apart with gap-2 and rounded-lg corners from Tailwind, creating tab-like cards with left-aligned plus/minus toggles from Lucide React. Built with shadcn/ui and Radix UI, each section feels independent—perfect for dashboards, settings panels, or anywhere discrete expandable cards make more sense than connected stacks.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-1.jsonRelated patterns you will also like
Tabs Accordion
Tab-style accordion with chevron indicators
Tabs with Plus Trigger
Same tab style with right-aligned plus/minus
Standard with Left Plus Trigger
Left plus/minus with connected borders
Tabs with Left Chevron
Tab style with left chevron indicators
Card Component
Non-collapsible card layout
Collapsible Card
Single collapsible card component
Questions you might have
React Accordion - Icon, Subtitle, and Chevron
An accordion combining category icons, subtitle text, and standard chevron indicators for complete information hierarchy with subtle affordance
React Accordion Tabs
A tab-style accordion with separated card-like sections and default chevron indicators for clean expandable content organization