Alert

Displays a callout for user attention.

Installation

npx ruma-ui add alert

Usage

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

export default function AlertDemo() {
  return (
    <div className="space-y-4 w-full max-w-lg">
      <Alert variant="default">
        <AlertTitle>Heads up!</AlertTitle>
        <AlertDescription>You can add components to your app using the ruma-ui CLI.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <AlertTitle>Error</AlertTitle>
        <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
      </Alert>
    </div>
  );
}

API Reference

PropTypeDefaultDescription
variant"default" | "destructive" | "success" | "warning""default"Alert severity style.