Alert
Inline callout for statuses and notices, in five variants.
Heads up
Neutral information for the reader.
New version available
Update to get the latest tokens.
Deployed
Your site is live.
Trial ends in 3 days
Add billing to avoid interruption.
Build failed
Check the deploy logs for details.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/alert.jsonUsage
The first SVG child becomes the leading icon automatically.
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
import { CircleCheck } from "lucide-react";
<Alert variant="success">
<CircleCheck />
<AlertTitle>Saved</AlertTitle>
<AlertDescription>Everything is up to date.</AlertDescription>
</Alert>Props
| Prop | Type | Default |
|---|---|---|
variant | neutral · info · success · warning · destructive | neutral |
Accessibility
- Renders with
role="alert", so newly mounted alerts are announced immediately; for less urgent notices rendered with the page, that's harmless. - Status colors use the paired text tokens, keeping contrast in both themes.