Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Collapsible - Card with Icon Header
A React collapsible card with icon badge, title, and subtitle providing rich header context using shadcn/ui and Lucide React
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
More than just a title—collapsibles with context. This React collapsible card features icon badge (Plus in primary-themed circle), heading text, and Click to expand subtitle creating layered information hierarchy. Built with shadcn/ui using gap-3 spacing and flex-1 text-left alignment. The icon visually categorizes content while subtitle guides interaction. Perfect for help sections, feature explanations, add-ons panels, or any collapsible where users need context before deciding to expand.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Card Collapsible
Basic card with chevron
Card with Badge
Badge label in header
FAQ with Icon
Help circle icon FAQ
Nested Card Content
Structured content sections
Checkbox with Description
Similar subtitle pattern
Standard Collapsible
Basic without card styling
Questions you might have
React Card Collapsible
A React collapsible card with border and shadow for expandable content sections using shadcn/ui and Radix UI primitives
React Collapsible - Nested Card Content
A React collapsible card with structured nested sections divided by borders for organized multi-part content using shadcn/ui