Shadcn.io is not affiliated with official shadcn/ui
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
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.
Info Box Outline preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Warning Outline
A React collapsible with yellow warning theme featuring AlertTriangle icon and semantic color borders for cautionary expandable notices using shadcn/ui
Dashed Outline
A React collapsible with border-dashed outline creating subtle visual definition for optional or secondary expandable configuration sections using shadcn/ui