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
Installation
npx @gentleduck/cli add alert
npx @gentleduck/cli add alert
Usage
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"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><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
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 -> 'ltr'). |
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. |
RTL Support
Direction is resolved through the shared primitives direction module. Use a local dir="rtl" override when the component exposes it, or set DirectionProvider at app/root level for global RTL/LTR behavior.