React Accordion - Icon, Subtitle, and Chevron
An accordion combining category icons, subtitle text, and standard chevron indicators for complete information hierarchy with subtle affordance
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
This is information architecture at its finest. Category icons from Lucide React for instant recognition, subtitle text for context, and subtle chevron indicators from shadcn/ui and Radix UI for affordance. It's the perfect balance—rich information without overwhelming users with bold toggles. Ideal for content-focused interfaces where reading takes priority over interaction, like documentation or knowledge bases.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/accordion-subtitle-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/accordion-subtitle-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/accordion-subtitle-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/accordion-subtitle-4.jsonRelated patterns you will also like
Subtitle with Icon
Icons and subtitles without explicit chevron
Full Featured Accordion
Icons, subtitles, and plus/minus toggles
Icon Accordion
Icons without subtitles
Subtitle Accordion
Subtitles without icons
Subtitle with Plus Trigger
Subtitles with bold plus/minus indicators
Card Component
Alternative rich content layout
Questions you might have
React Accordion - Subtitle with Plus Trigger
An accordion with subtitle text and plus/minus toggle indicators, combining contextual information with bold affordance
React Accordion - Tabs with Left Plus Trigger
A tab-style accordion with left-aligned plus/minus indicators and visual separation between items for card-like expandable sections