React Accordion - Subtitle with Plus Trigger
An accordion with subtitle text and plus/minus toggle indicators, combining contextual information with bold affordance
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Subtitles give context, plus/minus gives obvious affordance—why not both? This React accordion from shadcn/ui and Radix UI pairs subtitle text with bold Lucide React toggles. Users get extra information before expanding AND clear visual cues about interaction. Perfect for settings interfaces, preference panels, or anywhere you want both information density and unmistakable interactivity.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/accordion-subtitle-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/accordion-subtitle-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/accordion-subtitle-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/accordion-subtitle-3.jsonRelated patterns you will also like
Subtitle Accordion
Subtitles with chevron indicators
Standard with Plus Trigger
Plus/minus without subtitles
Full Featured Accordion
Icons, subtitles, and plus/minus combined
Subtitle with Icon
Subtitles with category icons
Form with Plus Trigger
Multi-step form with plus/minus indicators
Multi-level with Plus Trigger
Nested accordion with plus/minus toggles
Questions you might have
React Accordion - Subtitle with Left Icon
An accordion combining category icons with subtitle text for rich information hierarchy in collapsible sections
React Accordion - Icon, Subtitle, and Chevron
An accordion combining category icons, subtitle text, and standard chevron indicators for complete information hierarchy with subtle affordance