Alert

Displays a callout for user attention with optional title, description, and action.

Heads up!

You can add components and dependencies to your app using the CLI.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/alert.json

Usage

Use alerts for status messages, warnings, and important callouts.

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

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

Pass variant="destructive" for error-style callouts. Compose an icon as a child of Alert for leading indicators, and use AlertAction for a corner action.