Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Collapsible - Info Box Outline
A React collapsible with blue informational theme featuring Info icon and semantic color borders for expandable notices using shadcn/ui and dark mode support
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Info boxes guide users—blue signals helpful not urgent. This React info collapsible combines blue semantic colors with Info icon from Lucide React creating friendly informational notices. Built with shadcn/ui and Radix UI featuring border-blue-200, bg-blue-50 backgrounds, and complete dark mode theming with dark:border-blue-900 variants. The semantic blue signals helpful information not warnings or errors—perfect for tips, feature announcements, onboarding hints, helpful notices, changelog items, or anywhere expandable content provides supplementary information users might want to know without urgency.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Warning Outline
Yellow warning theme for cautionary content
Outlined Collapsible
Neutral outlined without semantic colors
Info Alert
Non-collapsible informational alert
Card with Icon
Icon badge with subtitle card variant
Accordion with Icons
Multi-section expandable with icons
FAQ Card Style
Card-styled expandable Q&A
Questions you might have
React Collapsible - Warning Outline
A React collapsible with yellow warning theme featuring AlertTriangle icon and semantic color borders for cautionary expandable notices using shadcn/ui
React Collapsible - Dashed Outline
A React collapsible with border-dashed outline creating subtle visual definition for optional or secondary expandable configuration sections using shadcn/ui