Alert

Calendar connected

New events will show up on Home within a minute.

Order placed

Arrives Thursday. Receipt sent to your inbox.

Card expires soon

Update it before Nov 1 to keep renewals running.

Sync failed

We couldn't reach your bank. Try again in a moment.

Installation

pnpm dlx shadcn@latest add @paneui/alert

Usage

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

<Alert variant="info">
  <AlertIcon />
  <AlertContent>
    <AlertTitle>Calendar connected</AlertTitle>
    <AlertDescription>New events show up within a minute.</AlertDescription>
  </AlertContent>
  <AlertClose />
</Alert>

Composition

Alert
├── AlertIcon
├── AlertContent
│   ├── AlertTitle
│   └── AlertDescription
├── AlertAction
└── AlertClose

Examples

Variants

Default

Custom Icon

Actions

Custom Dismiss

Small

Use inside cards, dialogs and forms.

Motion

The alert scales from 96% as it enters and reverses on dismiss, so the content below slides up. With reduced motion it only fades.

Accessibility

warning and destructive alerts get role="alert" so screen readers announce them at once; the others get role="status". Override with role.

API Reference

Inline message surface that animates in and out. Also accepts every prop of motion.div.

size= "default": "sm" | "default"; sm uses 10px padding, a 14px radius and the 24px icon chip; default 14px, 18px and 32px.
variant= "default": "default" | "info" | "success" | "warning" | "destructive"; Background tint, icon chip tone and default icon.
open: boolean; Controlled visibility. Hiding animates the alert out.
defaultOpen= true: boolean; Visible on first render.
onOpenChange: (open: boolean) => void; Called when the alert is shown or dismissed.
role: "alert" | "status"; Defaults to alert for warning / destructive and status otherwise.
contentClassName: string; Classes for the inner surface row; className goes on the outer element that animates height.

Prop	Type	Default	Description
size	"sm" \| "default"	"default"	`sm` uses 10px padding, a 14px radius and the 24px icon chip; `default` 14px, 18px and 32px.
variant	"default" \| "info" \| "success" \| "warning" \| "destructive"	"default"	Background tint, icon chip tone and default icon.
open	boolean	—	Controlled visibility. Hiding animates the alert out.
defaultOpen	boolean	true	Visible on first render.
onOpenChange	(open: boolean) => void	—	Called when the alert is shown or dismissed.
role	"alert" \| "status"	—	Defaults to `alert` for `warning` / `destructive` and `status` otherwise.
contentClassName	string	—	Classes for the inner surface row; `className` goes on the outer element that animates height.

data-variant: The variant value.
data-size: The size value.

Data attribute	Description
data-variant	The `variant` value.
data-size	The `size` value.

AlertIcon

An IconChip in the variant's tone. Renders the variant's default icon unless children are given. Also accepts every prop of span.

children: ReactNode; Icon to show instead of the default.

Prop	Type	Default	Description
children	ReactNode	—	Icon to show instead of the default.

AlertContent

Stacks title and description beside the icon. Also accepts every prop of div.

AlertTitle

Also accepts every prop of div.

AlertDescription

Muted text; links inside are underlined. Also accepts every prop of div.

AlertAction

Right-aligned slot for buttons. Also accepts every prop of div.

AlertClose

Round × button that dismisses the alert. Call event.preventDefault() in onClick to keep it open. Also accepts every prop of button.

children= <XIcon />: ReactNode; Replace the × icon.

Prop	Type	Default	Description
children	ReactNode	<XIcon />	Replace the × icon.

useAlert

Reads the nearest Alert. Throws outside one.

open: boolean; Whether the alert is visible.
variant: AlertVariant; The alert's variant.
size: AlertSize; The alert's size.
setOpen: (open: boolean) => void; Show or hide the alert.
dismiss: () => void; Hide the alert with its exit animation.

Prop	Type	Default	Description
open	boolean	—	Whether the alert is visible.
variant	AlertVariant	—	The alert's variant.
size	AlertSize	—	The alert's size.
setOpen	(open: boolean) => void	—	Show or hide the alert.
dismiss	() => void	—	Hide the alert with its exit animation.