React Accordion - Standard with Plus Trigger
An accordion using bold plus/minus toggle indicators instead of chevrons for more prominent expand/collapse affordance
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Chevrons are subtle. Maybe too subtle. This React accordion swaps them for bold plus/minus icons from Lucide React that demand attention. Built with shadcn/ui and Radix UI, the indicators fade between states with smooth opacity transitions—perfect for interfaces where you want expand/collapse actions to feel obvious and clickable, like settings panels or help sections.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-3.jsonRelated patterns you will also like
Standard Accordion
Basic accordion with chevron indicators
Standard with Left Plus Trigger
Same plus/minus pattern with left alignment
Form with Plus Trigger
Multi-step form using plus/minus indicators
Icon with Plus Trigger
Accordion combining icons and plus/minus toggles
Multi-level with Plus Trigger
Nested accordion with plus/minus on parents
Accordion Tabs with Plus Trigger
Tab-style sections with plus/minus controls
Questions you might have
React Accordion - Standard with Left Chevron
An accordion with left-aligned chevron indicators using flex-row-reverse for action-first navigation patterns
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