Alert

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

On this page

Alert Title

This is an alert description.

Props

title

description

variant

icon

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

Installation

npm

pnpm

yarn

bun

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>

Examples

Default

Payment information

You are currently on the free plan. Upgrade to unlock more features.

Warning

Your session will expire in 5 minutes. Please save your work.

Danger

Error

Failed to save changes. Please check your connection and try again.

Success

Your changes have been saved successfully.

Custom Icon

Information

This alert uses a custom icon to convey additional context.

Action

Upgrade Required

You are currently on the free plan. Upgrade to unlock more features.

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

The title of the alert.

Supports all div attributes.

Prop	Type	Default

AlertDescription

The description of the alert.

Supports all div attributes.

Prop	Type	Default

AlertAction

Contains actions such as buttons, displayed at the end of the alert.

Supports all div attributes.

Prop	Type	Default

Last updated on 6/16/2026