Shadcn.io is not affiliated with official shadcn/ui
Warning Outline
A React collapsible with yellow warning theme featuring AlertTriangle icon and semantic color borders for cautionary expandable notices using shadcn/ui
Warnings need attention—color does that work. This React warning collapsible combines yellow semantic colors with AlertTriangle icon from Lucide React creating unmistakable cautionary alerts. Built with shadcn/ui and Radix UI featuring border-yellow-200, bg-yellow-50 backgrounds, and complete dark mode theming with dark:border-yellow-900 variants. The semantic yellow immediately signals caution before users even read the text—perfect for deprecation notices, risky actions, beta features, system warnings, or anywhere expandable content carries cautionary information requiring user awareness.
Warning Outline preview
Installation
Related Components
Info Box Outline
Blue semantic theme for informational content
Outlined Collapsible
Neutral outlined collapsible without semantic colors
Warning Alert
Non-collapsible warning alert component
Card with Badge
Badge-based status indicators
Destructive Alert Dialog
Modal warnings for critical actions
FAQ with Icon
Icon-enhanced collapsible Q&A
FAQ
Was this page helpful?
Sign in to leave feedback.
Outlined Collapsible
A React collapsible with prominent border-2 outline creating strong visual definition for expandable system information using 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