React Accordion - Standard with Left Plus Trigger
An accordion with left-aligned plus/minus indicators, combining bold visual affordance with action-first layout for navigation contexts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Most accordions hide their toggles on the right like they're ashamed. This React accordion puts plus/minus icons from Lucide React front and center on the left, using shadcn/ui and Radix UI. It's the intersection of bold indicators and action-first UX—perfect for sidebars, navigation menus, or any interface where "can I expand this?" should be instantly obvious.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-4.jsonRelated patterns you will also like
Standard with Plus Trigger
Same plus/minus pattern with right alignment
Standard with Left Chevron
Left-aligned accordion with subtle chevron indicators
Multi-level with Left Plus Trigger
Nested accordion with left-aligned plus/minus
Accordion Tabs with Plus Trigger
Tab-style accordion with left plus/minus
Form with Plus Trigger
Multi-step form using plus/minus indicators
Sidebar Navigation
Navigation menu with left-aligned controls
Questions you might have
React Accordion - Standard with Plus Trigger
An accordion using bold plus/minus toggle indicators instead of chevrons for more prominent expand/collapse affordance
React Accordion - Icon
An accordion with icon indicators next to each section title, adding visual category identification to collapsible content