Alert

Displays a callout for user attention.

Heads up!

You can add components to your app using the CLI.

Installation

Add the alert component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/alert.json

Usage

tsx

import { Alert } from "@/components/ui/alert"

Examples

Destructive

Error

Your session has expired. Please log in again.

import { TerminalIcon } from "lucide-react"

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

<Alert variant="destructive" className="w-80">
  <TerminalIcon />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
</Alert>