<Alert>
<AlertTitle>Payment information</AlertTitle>
<AlertDescription>
You are currently on the free plan. Upgrade to unlock more features.
</AlertDescription>
</Alert>pnpm dlx shadcn@latest add @dotui/alertUse 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>Use the controls below to experiment with different alert props and see the live preview and code update.
The visual style of the alert.
"neutral" | "danger" | "warning" | "info" | "success"<Alert>
<AlertTitle>Alert Title</AlertTitle>
<AlertDescription>This is an alert description.</AlertDescription>
</Alert>Missing description.
Supports all div attributes.
Missing description.
Supports all div attributes.
Missing description.
Supports all div attributes.
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Dynamic(Alert)>
<Dynamic(AlertTitle)>Alert Title</Dynamic(AlertTitle)>
<Dynamic(AlertDescription)>This is an alert description.</Dynamic(AlertDescription)>
</Dynamic(Alert)>