Alert
shadcn/uiDisplays a callout for user attention.
Alert
Heads up!
You can add components to your app using the CLI.
Error
Your session has expired. Please log in again.
import { Alert, AlertTitle, AlertDescription } from "@/components/optics/alert";import { Terminal, AlertCircle } from "lucide-react";<div className="flex flex-col gap-4"> <Alert> <Terminal /> <AlertTitle> Heads up! </AlertTitle> <AlertDescription> You can add components to your app using the CLI. </AlertDescription> </Alert> <Alert variant="destructive"> <CircleAlert /> <AlertTitle> Error </AlertTitle> <AlertDescription> Your session has expired. Please log in again. </AlertDescription> </Alert></div>import { Alert, AlertTitle, AlertDescription } from "@/components/optics/alert";import { Terminal, AlertCircle } from "lucide-react";<div className="flex flex-col gap-4"> <Alert> <Terminal /> <AlertTitle> Heads up! </AlertTitle> <AlertDescription> You can add components to your app using the CLI. </AlertDescription> </Alert> <Alert variant="destructive"> <CircleAlert /> <AlertTitle> Error </AlertTitle> <AlertDescription> Your session has expired. Please log in again. </AlertDescription> </Alert></div>Installation
pnpm dlx shadcn@latest add @optics/alert
Props
<Alert />
Name | Type | |
|---|---|---|
variant | string(default: default) |