Alert

Installation

bunx --bun shadcn@latest add @sui/alert

Install with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.

Usage

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@workspace/ui/components/alert"

<Alert>
  <InfoIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
  <AlertAction>
    <Button variant="outline">Enable</Button>
  </AlertAction>
</Alert>

Composition

Use the following composition to build an Alert:

Alert
├── Icon
├── AlertTitle
├── AlertDescription
└── AlertAction

Basic

A basic alert with an icon, title and description.

Destructive

Use variant="destructive" to create a destructive alert.

Action

Use AlertAction to add a button or other action element to the alert.

Custom Colors

You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

API Reference

Alert

The Alert component displays a callout for user attention.

AlertTitle

The AlertTitle component displays the title of the alert.

AlertDescription

The AlertDescription component displays the description or content of the alert.

AlertAction

The AlertAction component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.