radkradk

Alert

Displays a callout for user attention with support for multiple variants.

Installation

npx radk add alert

Usage

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the CLI.
  </AlertDescription>
</Alert>

Examples

Destructive

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

Warning

<Alert variant="warning">
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>This action cannot be undone. Proceed with caution.</AlertDescription>
</Alert>

Success

<Alert variant="success">
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>Your changes have been saved successfully.</AlertDescription>
</Alert>

With Icon

import { Terminal } from "lucide-react"

<Alert>
  <Terminal className="h-4 w-4" />
  <AlertTitle>Terminal</AlertTitle>
  <AlertDescription>
    Run <code className="font-mono">npx radk init</code> to get started.
  </AlertDescription>
</Alert>