React Alert - Warning with Everything
A complete warning alert with icon, title, description, and action buttons for maximum cautionary clarity and informed decision making
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
This is the full warning experience with maximum visibility. TriangleAlert icon from Lucide React, clear title, risk explanation, and action buttons working together in shadcn/ui's amber warning styling (border-warning/80, bg-warning/5, text-warning). Built with flex-row items-start gap-3 for icon alignment and translate-y-0.5 for optical centering, this pattern delivers every element for prominent risk communication. Perfect for destructive operations requiring full informed consent, irreversible actions with explained consequences, critical quota warnings with upgrade paths, or significant cautions where maximum visibility, complete context, and explicit decision are essential.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/alert-warning-5.jsonnpx shadcn@latest add https://www.shadcn.io/registry/alert-warning-5.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/alert-warning-5.jsonbunx shadcn@latest add https://www.shadcn.io/registry/alert-warning-5.jsonRelated patterns you will also like
Warning with Description and Actions
Full warning without icon
Warning with Title
Minimal warning baseline
Error with Everything
Error variant fully featured
Info with Everything
Info variant fully featured
Success with Everything
Success variant fully featured
Warning with Actions
Warning with action buttons
Questions you might have
React Alert - Warning with Title, Description, and Action
A comprehensive warning alert combining title, description, and action buttons for complete cautionary messaging with context and decision options
React 16:9 Aspect Ratio (Widescreen)
A 16:9 widescreen aspect ratio container for video players, hero images, and modern multimedia content