Shadcn Alert

import {
  Alert,
  AlertDescription,

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @reui/alert
Copy

Usage

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

<Alert>
  <ShieldCheckIcon />
  <AlertTitle>Security Update</AlertTitle>
  <AlertDescription>Update your password and enable 2FA.</AlertDescription>
  <AlertAction>
    <Button variant="outline" size="xs">
      Dismiss
    </Button>
    <Button size="xs">Update</Button>
  </AlertAction>
</Alert>

Examples

With Icon

import {
  Alert,
  AlertDescription,

With Action Buttons

import {
  Alert,
  AlertAction,

With Extended Message

import {
  Alert,
  AlertDescription,

With Title and Action Buttons

import {
  Alert,
  AlertAction,

With Description and Action Buttons

import {
  Alert,
  AlertAction,

Info Alert

import {
  Alert,
  AlertDescription,

Success Alert

import {
  Alert,
  AlertDescription,

Warning Alert

import {
  Alert,
  AlertDescription,

Destructive Alert

import {
  Alert,
  AlertDescription,

Invert Alert

import {
  Alert,
  AlertDescription,

API Reference

This component follows the same API design as the Alert Component from shadcn/ui. The key difference is that it uses extended color tokens such as --success, --info, --warning and --invert for alert variants instead of utility classes.

This approach enables consistent, reusable state variants across the project without relying on custom Tailwind color utilities.

<Alert variant="success">
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>This is a success alert</AlertDescription>
</Alert>

Props