Alert
A short, prominent message about the state of the page.
Heads up
You can add components to your app using the CLI.
Installation
npx shadcn@latest add @blank/alertUsage
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"<Alert variant="info">
<InfoIcon />
<AlertTitle>Heads up</AlertTitle>
<AlertDescription>The API key rotates every 90 days.</AlertDescription>
</Alert>Examples
Variants
Status tints only the leading icon. The surface stays neutral, so several alerts on one page do not compete with the content around them.
A new version is available
Payment received
Your trial ends in three days
We could not process the card
Action
Storage almost full
You have used 92% of your plan.