React Accordion - Tabs with Plus Trigger
A tab-style accordion with right-aligned plus/minus indicators and card-like separation for bold, expandable sections
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Card-style layouts need card-style affordance. This React accordion from shadcn/ui and Radix UI uses gap-2 spacing and rounded-lg corners for visual separation, paired with right-aligned plus/minus indicators from Lucide React for maximum interactivity. Each section screams "click me!"—perfect for control panels, feature toggles, or dashboards where expand/collapse actions take center stage.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-3.jsonRelated patterns you will also like
Tabs with Left Plus Trigger
Same tab style with left-aligned plus/minus
Tabs Accordion
Tab-style with subtle chevron indicators
Standard with Plus Trigger
Plus/minus with connected borders
Tabs with Left Chevron
Tab style with left chevron indicators
Collapsible Card
Single collapsible card component
Card Component
Non-collapsible card layout
Questions you might have
React Accordion Tabs
A tab-style accordion with separated card-like sections and default chevron indicators for clean expandable content organization
React Accordion - Tabs with Left Chevron
A tab-style accordion with left-aligned chevron indicators using flex-row-reverse for action-first card navigation