Components
Alert
Displays a short, important message to attract the user's attention without interrupting their task.
Install
npx shadcn@latest add https://atomx.acau.net/r/alert.jsonUsage
Alert is a static, inline callout — unlike Alert Dialog, it does not interrupt the user or require a response. Compose it from an optional icon, an AlertTitle, and an AlertDescription. An <svg> icon placed directly inside Alert is laid out into the leading column automatically.
Use the destructive variant for errors and failures; keep the default variant for neutral, informational messages.
<Alert variant="destructive">
<CircleAlert />
<AlertTitle>Unable to save changes</AlertTitle>
<AlertDescription>Check your connection and try again.</AlertDescription>
</Alert>Preview
Default
Heads up!
You can add components to your app using the CLI.
Destructive
Something went wrong
Your session has expired. Please log in again.
Props
Alert extends React.ComponentProps<"div">.
| Prop | Type | Notes |
|---|---|---|
variant | "default" | "destructive" | Visual style. Defaults to default. |
className | string | Merged with the variant classes. |
AlertTitle and AlertDescription extend React.ComponentProps<"div"> and are positioned by Alert's internal grid.