React Accordion - Subtitle with Left Icon
An accordion combining category icons with subtitle text for rich information hierarchy in collapsible sections
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Want to give users maximum context before they expand? This React accordion from shadcn/ui and Radix UI combines Lucide React icons for visual categorization with subtitle text for additional details. Icon tells you what it is, title names it, subtitle adds context—all in one scannable trigger. Perfect for feature-rich interfaces like admin panels or complex documentation.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/accordion-subtitle-2.jsonnpx shadcn@latest add https://www.shadcn.io/registry/accordion-subtitle-2.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/accordion-subtitle-2.jsonbunx shadcn@latest add https://www.shadcn.io/registry/accordion-subtitle-2.jsonRelated patterns you will also like
Subtitle Accordion
Subtitles without icons
Icon, Subtitle, and Chevron
Same pattern with default chevron indicator
Icon Accordion
Icons without subtitles
Full Featured Accordion
Icons, subtitles, and plus/minus toggles
Multi-level with Icons
Nested accordion with icon indicators
Card Component
Alternative rich content layout
Questions you might have
React Accordion Subtitle
An accordion with subtitle text beneath each title, providing additional context or preview information for collapsible sections
React Accordion - Subtitle with Plus Trigger
An accordion with subtitle text and plus/minus toggle indicators, combining contextual information with bold affordance