Alert
An inline pane of tinted glass for callouts and statuses. The destructive variant announces itself assertively to screen readers.
Install
$ pnpm dlx shadcn@latest add https://vitrumui.vercel.app/r/alert.jsonExamples
Variants
Heads up
The registry rebuilds on every deploy.
All routes static
47 of 47 pages prerendered.
Contrast floor reached
Tint alpha was clamped to keep text readable.
"use client";
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon } from "lucide-react";
import {
Alert,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";
export function AlertDemo() {
return (
<div className="flex w-full max-w-md flex-col gap-3">
<Alert>
<InfoIcon />
<AlertTitle>Heads up</AlertTitle>
<AlertDescription>
The registry rebuilds on every deploy.
</AlertDescription>
</Alert>
<Alert variant="success">
<CircleCheckIcon />
<AlertTitle>All routes static</AlertTitle>
<AlertDescription>47 of 47 pages prerendered.</AlertDescription>
</Alert>
<Alert variant="destructive">
<TriangleAlertIcon />
<AlertTitle>Contrast floor reached</AlertTitle>
<AlertDescription>
Tint alpha was clamped to keep text readable.
</AlertDescription>
</Alert>
</div>
);
}API
<Alert />
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "neutral" | "accent" | "success" | "warning" | "destructive" | "neutral" | Tint and icon color. |