React Accordion Tabs
A tab-style accordion with separated card-like sections and default chevron indicators for clean expandable content organization
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Tight, connected accordion stacks aren't always the answer. This React tab-style accordion from shadcn/ui and Radix UI spaces sections apart with gap-2 and rounds each with rounded-lg borders. Chevron indicators keep it subtle while the card-like separation makes each section feel distinct. Perfect for feature lists, settings categories, or dashboard widgets that deserve breathing room.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/accordion-tabs-2.jsonRelated patterns you will also like
Standard Accordion
Traditional accordion with connected borders
Tabs with Plus Trigger
Same tab style with plus/minus indicators
Tabs with Left Plus Trigger
Tab style with left-aligned plus/minus
Tabs with Left Chevron
Tab style with left-aligned chevron
Card Component
Non-collapsible card for static content
Collapsible Card
Single collapsible card
Questions you might have
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
React Accordion - Tabs with Plus Trigger
A tab-style accordion with right-aligned plus/minus indicators and card-like separation for bold, expandable sections