1. Docs
  2. Components
  3. Alert

Alert

Displays a callout for user attention.

Installation

npx shadcn@latest add @kanpeki/alert

Anatomy

import { TerminalIcon } from "lucide-react";
import { Alert } from "~/components/ui/alert";

<Alert.Root>
  <TerminalIcon className="size-4" />
  <Alert.Title>Heads up!</Alert.Title>
  <Alert.Description>
    You can add components and dependencies to your app using the cli.
  </Alert.Description>
</Alert.Root>

Examples

Destructive

API Reference

PropTypeDefault
variant
enum
"default"