Alert

Installation

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Copy and paste the following code into your project.

View complete source: components/ui/alert.tsx

Update the import paths to match your project setup.

Usage

import {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/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 JGuang UI, see the RTL configuration guide.

API Reference

Alert

The Alert component displays a callout for user attention.

Prop	Type	Default
variant	"default" | "destructive"	"default"

AlertTitle

The AlertTitle component displays the title of the alert.

Prop	Type	Default
className	string	-

AlertDescription

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

Prop	Type	Default
className	string	-

AlertAction

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

Prop	Type	Default
className	string	-