Alert Title
This is an alert description.
Controls
variant
icon
<Alert className="max-w-md">
<AlertTitle>Alert Title</AlertTitle>
<AlertDescription>This is an alert description.</AlertDescription>
</Alert>Installation
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/alertUsage
Use alerts to display important messages that require user attention.
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'<Alert>
<AlertTitle>Alert Title</AlertTitle>
<AlertDescription>Alert description</AlertDescription>
</Alert>Anatomy
An alert composes a title, a description, and an optional action. To add an icon, place an icon element as the alert's first child — styles pick it up positionally, there is no icon prop.
import {
Alert,
AlertTitle,
AlertDescription,
AlertAction,
} from '@/components/ui/alert'
import { CircleAlert } from 'lucide-react'
;<Alert>
<CircleAlert />
<AlertTitle>Title</AlertTitle>
<AlertDescription>Description</AlertDescription>
<AlertAction>Action</AlertAction>
</Alert>AlertAction renders at the end and typically wraps a Button or Badge.
Examples
Default
Payment information
You are currently on the free plan. Upgrade to unlock more features.
With Action
Upgrade Required
You are currently on the free plan. Upgrade to unlock more features.
Dismissible
Changes saved
Your profile has been updated successfully.
Form Error
API Reference
Alert
An alert displays a short, important message that attracts the user's attention without interrupting their task.
Supports all div attributes.
| Prop | Type | Default | |
|---|---|---|---|
union | 'neutral' | ||
AlertTitle
AlertDescription
AlertAction
Contains actions such as buttons, displayed at the end of the alert.
Supports all div attributes.
| Prop | Type | Default | |
|---|---|---|---|
Last updated on 7/7/2026