alert

Displays a callout for user attention.

Philosophy

Alerts exist to break the user's flow - intentionally. When something demands attention, a subtle inline message beats a disruptive modal every time. We keep the API to just variant because an alert's job is simple: show a message with visual weight. Anything more complex belongs in a dialog.

How It's Built

Loading diagram...

Installation

npx @gentleduck/cli add alert

npx @gentleduck/cli add alert

Usage

import { Terminal } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

<Alert>
  <Terminal className="h-4 w-4" />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Examples

Variants

RTL Support

Set the direction once with DirectionProvider (or <html dir="rtl">) and the alert follows it: the icon moves to the start side. No dir prop or rtl: classes needed.

Motion

Alpha: Motion Compositions

Motion components work standalone, but some compositions may behave unexpectedly: this is still under active development. If you find a broken composition, please file an issue.

Use MotionAlert for a staggered entrance animation powered by motion. The alert, title, and description each use a scaleIn entrance (fade, scale, and blur) with a bouncy spring transition, staggered by delay.

Requires the motion package. Use MotionAlert instead of Alert, MotionAlertTitle instead of AlertTitle, and MotionAlertDescription instead of AlertDescription. The icon stays as a plain SVG.

API Reference

Alert

Prop	Type	Default	Description
`variant`	`'default' \| 'destructive'`	`'default'`	Visual style variant for the alert
`dir`	`'ltr' \| 'rtl'`	-	Text direction override. Resolved via `useDirection` (`dir` prop -> `DirectionProvider` -> `<html dir>`).
`className`	`string`	-	Additional CSS classes applied to the alert container
`children`	`React.ReactNode`	-	Alert content, typically an icon, AlertTitle, and AlertDescription
`...props`	`React.ComponentProps<'div'>`	-	Additional standard component props.

AlertTitle

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes applied to the title element
`children`	`React.ReactNode`	-	Title text content
`...props`	`React.ComponentProps<'div'>`	-	Additional standard component props.

AlertDescription

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes applied to the description element
`children`	`React.ReactNode`	-	Description text content
`...props`	`React.ComponentProps<'div'>`	-	Additional standard component props.

MotionAlert

scaleIn entrance (fade, scale, and blur) with a springBouncy transition on mount. Requires the motion package.

Prop	Type	Default	Description
`...props`	`AlertProps`	-	All props from `Alert` are supported

MotionAlertTitle

scaleIn entrance (fade, scale, and blur) with a springBouncy transition, delayed 100ms after the container. Requires the motion package.

Prop	Type	Default	Description
`...props`	`AlertTitleProps`	-	All props from `AlertTitle` are supported

MotionAlertDescription

scaleIn entrance (fade, scale, and blur) with a springBouncy transition, delayed 180ms after the title. Requires the motion package.

Prop	Type	Default	Description
`...props`	`AlertDescriptionProps`	-	All props from `AlertDescription` are supported