Component

Alert

A banner-style alert component for important messages

UI Component

Alert

A banner-style alert component built with Tailwind CSS and class-variance-authority.

Installation

bash

liminal add alert

Usage

tsx

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>
  );
}

Variants

tsx

<Alert variant="default">
  <AlertTitle>Default alert</AlertTitle>
  <AlertDescription>
    This is a neutral alert using your theme colors.
  </AlertDescription>
</Alert>

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Something went wrong. Please try again.
  </AlertDescription>
</Alert>