Alerts

A list of alerts components.

Alert - Basic

Live Preview
Open in

X UI

Use the CLI to install this!

Installation

npm install class-variance-authority

Usage

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

export function MyComponent() {
  return (
    <Alert>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the cli.
      </AlertDescription>
    </Alert>
  );
}

Props

ComponentPropTypeDefaultDescription
Alertvariantstring"default"Alert variant style
AlertclassNamestring-Additional CSS classes
AlertTitleclassNamestring-Additional CSS classes
AlertDescriptionclassNamestring-Additional CSS classes

Variants

  • default - Standard alert style
  • destructive - Destructive alert style

Dependencies

This component requires the following packages:

  • class-variance-authority

Alert - Basic 02

Live Preview
Open in
Sarah Chen

Team Invitation

Kokonut invited you to join Design Team

Invited 5 minutes ago


Alert - Info

Live Preview
Open in

Saved to database


Alert - Fancy

Live Preview
Open in

Amazing milestone! 🎉

You've just hit 1,000 followers on your journey!


Alert - Payment

Live Preview
Open in

Payment Received

$2,400.00

The payment has been processed and added to your account


Alert - Glass

Live Preview
Open in

Black Friday Sale! 🎉

Get 50% off on all premium features. Limited time offer!


Alert - Classy

Live Preview
Open in
FREE TRIAL EXPIRED

Subscribe now to continue using our services.