Alert

A callout for important, non-blocking information — tinted semantic variants with an icon slot.

Feedback

New CLI version available

Run `pnpm dlx plum@latest` to get faster installs and the new diff command.

Playground

Tweak the props, the preview and the code follow.

Heads up

Your API key expires in 3 days.

Props

variant

title

description

icon

<Alert>
  <Terminal />
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>Your API key expires in 3 days.</AlertDescription>
</Alert>

Installation

npx @plumsydev/plum-ui add alert

Usage

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

<Alert variant="success">
  <CheckCircle2 />
  <AlertTitle>Domain verified</AlertTitle>
  <AlertDescription>acme.com is now live.</AlertDescription>
</Alert>

Examples

Variants

Domain verified

acme.com is now serving traffic over HTTPS.

Scheduled maintenance

Sunday 02:00–02:30 UTC. No downtime expected.

Approaching usage limit

You've used 86% of your bandwidth this month.

Payment failed

Update your card to keep your projects online.

Dismissible

Add an AlertAction and animate it out with AnimatePresence.

Introducing workspaces

Group projects, share environment variables and manage access in one place.

API Reference

Alert

Prop	Type	Default
`variant` Semantic color.	`"default" \| "destructive" \| "success" \| "warning" \| "info"`	`"default"`

AlertAction

Absolutely positioned top-right slot for a close button or link.

Notes

The first direct svg child becomes the icon column automatically — no wrapper needed.

PreviousAccordion NextAlert Dialog