Alert
An inline callout in a pane: a tinted box with a symbol, a title and a description.
@cupertinoui/alertRegistry JSON import { CircleAlertIcon, InfoIcon, TriangleAlertIcon } from "lucide-react"
import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
export default function AlertDemo() {
return (
<div className="flex w-full max-w-md flex-col gap-3">
<Alert>
<InfoIcon />
<AlertTitle>iCloud Drive is syncing</AlertTitle>
<AlertDescription>1,204 items left. You can keep working while it finishes.</AlertDescription>
</Alert>
<Alert variant="warning">
<TriangleAlertIcon />
<AlertTitle>Your startup disk is almost full</AlertTitle>
<AlertDescription>Remove files you no longer need to free up space.</AlertDescription>
<AlertAction>
<Button variant="secondary" size="sm">Manage…</Button>
</AlertAction>
</Alert>
<Alert variant="destructive">
<CircleAlertIcon />
<AlertTitle>The backup couldn’t be completed</AlertTitle>
<AlertDescription>The backup disk was disconnected.</AlertDescription>
</Alert>
</div>
)
}Installation
pnpm dlx shadcn@latest add @cupertinoui/alertThe first install also adds the macOS theme. See Installation to set up the registry.
Usage
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
<Alert>
<InfoIcon />
<AlertTitle>iCloud Drive is syncing</AlertTitle>
<AlertDescription>1,204 items left.</AlertDescription>
</Alert>API Reference
Every part forwards the props of the underlying element. The props below are the ones CupertinoUI adds or changes.
Alert
| Prop | Type | Description |
|---|---|---|
variant | "default" | "warning" | "destructive"Default: "default" | Blue, yellow or red. |
className | string | Extra classes, merged with the component's own. |
AlertTitle / AlertDescription / AlertAction
| Prop | Type | Description |
|---|---|---|
className | string | Extra classes, merged with the component's own. |