Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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.
Vetus truculenter quisquam abbas. Careo terga conscendo. Acidus adopto compono auxilium aveho demulceo verbum.
Pattern created by @haydenbleasel
Installation
Related 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