Shadcn.io is not affiliated with official shadcn/ui
React Tab-Style Accordion with Left Plus Trigger
Card-style accordion with left-aligned plus/minus indicators built with React, Next.js, shadcn/ui Accordion, Radix UI, and Tailwind CSS for expandable sections
Standard accordions stack tight with connected borders. This React accordion component breaks them apart with gap-2 and rounded-lg corners from Tailwind CSS, creating tab-like cards with left-aligned plus/minus toggles from Lucide React. Built with shadcn/ui Accordion primitives and Radix UI, each section feels independent. Perfect for Next.js dashboards, TypeScript settings panels, or anywhere discrete expandable cards make more sense than connected stacks.
React Tab-Style Accordion with Left Plus Trigger preview
Installation
Related Components
React Tab-Style Accordion
Tab-style accordion with chevron indicators
React Accordion with Plus Trigger
Tab style with right-aligned plus/minus
React Accordion with Left Plus
Left plus/minus with connected borders
React Tab Accordion with Left Chevron
Tab style with left chevron indicators
React Collapsible Card
Single collapsible card component
React Standard Accordion
Traditional accordion with connected borders
FAQ
Was this page helpful?
Sign in to leave feedback.
Tab-Style Accordion with Left Chevron
Tab-style accordion with left-aligned chevron indicators built with React, Next.js, shadcn/ui Accordion, Radix UI, and Tailwind CSS for action-first navigation
Tab-Style Accordion with Plus Trigger
Tab-style accordion with right-aligned plus/minus indicators built with React, Next.js, shadcn/ui Accordion, Radix UI, and Tailwind CSS for expandable cards