Email Alert
UIshadcn/ui Alert translated for React Email. Uses a narrow left-accent Column (email-safe alternative to CSS border-left). Five variants: default, info, success, warning, destructive. Includes AlertTitle and AlertDescription.
core/email-alertInstallation
1 · Add registry to components.json
2 · Install component
Examples
All variants
All five variants including standalone use without a title.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "info" | "success" | "warning" | "destructive" | — | Alert tone. Drives the left-accent and background colours. "info" maps to primary/accent tokens; success and warning use hardcoded green/amber. |
AlertTitle | component | — | Bold heading inside the Alert. Defaults to h3. Optional. |
AlertDescription | component | — | Muted body text inside the Alert. |