Alert

Actions

Displays a brief, important message for the user.

Alerts communicate state changes that deserve attention. They are non-modal and stay put on the page, with a tinted background and an icon that matches their tone.

npx shadcn@latest add alert

Variants

Four tones cover informational, success, warning, and error messages.

Preview

Live

Heads up

You can add components to your app with the CLI.

Deployment complete

Your site is live and ready for traffic.

Storage almost full

You are using 92% of your allocated storage.

Unable to save

Check your connection and try again.

tsx

1<Alert variant="info">
2  <AlertTitle>Heads up</AlertTitle>
3  <AlertDescription>You can add components to your app with the CLI.</AlertDescription>
4</Alert>
5
6<Alert variant="success">
7  <AlertTitle>Deployment complete</AlertTitle>
8  <AlertDescription>Your site is live and ready for traffic.</AlertDescription>
9</Alert>
10
11<Alert variant="warning">
12  <AlertTitle>Storage almost full</AlertTitle>
13  <AlertDescription>You are using 92% of your allocated storage.</AlertDescription>
14</Alert>
15
16<Alert variant="error">
17  <AlertTitle>Unable to save</AlertTitle>
18  <AlertDescription>Check your connection and try again.</AlertDescription>
19</Alert>

Custom icon

Swap the default icon with any lucide icon via the icon prop.

Preview

Live

New in v1.2

Dark mode, custom toasts, and keyboard shortcuts.

Changes saved

All changes were synced to the cloud.

tsx

1<Alert variant="info" icon={Sparkles}>
2  <AlertTitle>New in v1.2</AlertTitle>
3  <AlertDescription>Dark mode, custom toasts, and keyboard shortcuts.</AlertDescription>
4</Alert>
5
6<Alert variant="success" icon={Save}>
7  <AlertTitle>Changes saved</AlertTitle>
8  <AlertDescription>All changes were synced to the cloud.</AlertDescription>
9</Alert>

With an action

Alerts can carry a primary action next to the title.

Preview

Live

Update required

A newer version with bug fixes is available.

tsx

1<Alert variant="warning">
2  <AlertTitle className="flex w-full items-center justify-between gap-4">
3    Update required
4    <Button variant="outline" size="xs">
5      Update now
6    </Button>
7  </AlertTitle>
8  <AlertDescription>A newer version with bug fixes is available.</AlertDescription>
9</Alert>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
variant	"info" \| "success" \| "warning" \| "error"= "info"	Controls the tinted background, border, and text color.
icon	React.ElementType	Icon rendered next to the title. Defaults to an icon per variant.
children	React.ReactNode	AlertTitle and AlertDescription, or any custom content.
className	string	Additional classes for the alert container.