Alert
Displays a callout for user attention with support for multiple variants.
Heads up!
You can add components to your app using the CLI.
Error
Your session has expired. Please log in again.
Warning
This action cannot be undone. Proceed with caution.
Success
Your changes have been saved successfully.
Installation
npx radk add alertUsage
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>