shadcn.io is an independent project built on shadcn/ui
Only the title Success, on the default alert. No icon, no description, no buttons, and no semantic color.
Use it for a plain status that is not an error, info, success, or warning. If the news can disappear, use Sonner. In React, Ark UI does not add a tint.
Installation
Anatomy
Usage
<Alert className="max-w-lg">
<AlertTitle>Success</AlertTitle>
</Alert>FAQ
When should I use standard alerts vs colored variants?
Use the default when the message is neither good nor bad news, or when the page already has colored alerts and this one shouldn't compete. Reach for destructive, warning, success or info when the category matters to the reader.
What's the difference between standard and info alerts?
Only the look: variant="info" adds a blue tint, a blue border and a blue icon, which marks the message as information. The default variant has the card's background and the regular border, so it reads as part of the page.
Can I customize standard alert colors?
Yes: pass classes on Alert, such as a background and a border color, as the Alert page's Colors demo does. Use the theme's tokens rather than raw palette colors so the alert follows light and dark mode, and prefer a built-in variant when one fits.
What does this demo actually render?
An Alert with no variant and className="max-w-lg", holding one AlertTitle whose text is Success. There is no icon, description, or AlertAction.
API Reference
Alert
No extra props in this demo. The rest is on the Alert page.
