dotUI

Alert

Alerts display a short, important message in a way that attracts the user's attention.

Overview
Examples
<Alert>
  <AlertTitle>Payment information</AlertTitle>
  <AlertDescription>You are currently on the free plan. Upgrade to unlock more features.</AlertDescription>
</Alert>

Installation

npx shadcn@latest add @dotui/alert

Usage

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>

Playground

Use the controls below to experiment with different alert props and see the live preview and code update.

variant
icon
<Alert>
  <AlertTitle>Alert Title</AlertTitle>
  <AlertDescription>This is an alert description.</AlertDescription>
</Alert>

API Reference

Alert

Missing description.

Supports all div attributes.

PropType
union

AlertTitle

Missing description.

Supports all div attributes.

AlertDescription

Missing description.

Supports all div attributes.

AlertAction

Missing description.

Supports all div attributes.

On this page

Last updated on 1/13/2026

On this page

dotUI

Bringing singularity to the web.

Community

Built with passion by @mehdibha.