Alert

Displays a short, important message in a way that attracts the user's attention without interrupting their task.

$bunx shadcn@latest add @nx-ui/alert
Registry item
Installs withutils
Used byai-confirmation

Variants

The two built-in styles, default and destructive. AlertTitle and AlertDescription are both optional — use whichever the message needs.

Semantic colouring

Alert only ships default and destructive variants — success, warning and info are composed by colouring the icon and title on the default variant.

With an action

AlertAction pins a control to the top-right corner; the alert's padding adjusts automatically to make room.

Dismissible banner

A realistic composition: an interactive alert that dismisses itself, as it might sit atop a project page.

API reference

Exported parts and their props, extracted from the component source.