Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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.
Correptius amoveo nobis apud stipes. Acervus crustulum versus carus audio expedita. Curso charisma cubicularis nostrum traho angelus admitto clementia ducimus venia.
Pattern created by @haydenbleasel
Installation
Related 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