Alert
A message set into the page: a square-cornered box with its start edge in the message's tone, and the tone's badge as its mark.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/alertExamples
Four tones
Route updated
The north gate opens an hour later tonight.
Job taken
Reach the north gate before 22:00.
Low on fuel
Refuel before you take the next job.
Crate damaged
The reward drops by half.
import { Alert, AlertDescription, AlertTitle } from "@/components/zero/alert";export default function AlertTones() { return ( <div className="grid w-full max-w-lg gap-3"> <Alert> <AlertTitle>Route updated</AlertTitle> <AlertDescription> The north gate opens an hour later tonight. </AlertDescription> </Alert> <Alert variant="success"> <AlertTitle>Job taken</AlertTitle> <AlertDescription>Reach the north gate before 22:00.</AlertDescription> </Alert> <Alert variant="warning"> <AlertTitle>Low on fuel</AlertTitle> <AlertDescription> Refuel before you take the next job. </AlertDescription> </Alert> <Alert variant="danger"> <AlertTitle>Crate damaged</AlertTitle> <AlertDescription>The reward drops by half.</AlertDescription> </Alert> </div> );}Behaviour
The four tones reuse colours zeroUI already has: quiet grey for information, the accent for something done, the selection yellow for a warning, the danger red. Each has its own badge (info, done, alert), so the tone never rests on colour alone.
An alert is static: it is not announced when it appears. For a message that comes and goes, use a Toast.
Props
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "info" | "success" | "warning" | "danger" | "info" | The tone: the edge, the badge and its colour. |
| icon | ReactNode | — | Replaces the tone's badge; null leaves the mark out. |