Alert

A banner-style alert component for important messages

A banner-style alert component built with Tailwind CSS and class-variance-authority. Use it for important notices, errors, or warnings.

Heads up!

You can use this component to highlight important information.

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

export default function Example() {
  return (
    <Alert>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can use this component to highlight important information.
      </AlertDescription>
    </Alert>
  );
}

View Code

Installation

bash

liminal add alert

Usage

Heads up!

You can use this component to highlight important information.

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

export default function Example() {
  return (
    <Alert>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can use this component to highlight important information.
      </AlertDescription>
    </Alert>
  );
}

View Code

Examples

Variants

Default alert

This is a neutral alert using your theme colors.

Error

Something went wrong. Please try again.

<Alert variant="default">
  <AlertTitle>Default alert</AlertTitle>
  <AlertDescription>Neutral alert using your theme colors.</AlertDescription>
</Alert>
<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Something went wrong. Please try again.</AlertDescription>
</Alert>

View Code

API

Prop	Type	Default	Description
variant	"default" \| "destructive"	"default"	Visual style. Use destructive for errors or critical messages.