Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Outlined Collapsible
A React collapsible with prominent border-2 outline creating strong visual definition for expandable system information using shadcn/ui
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