Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProAn alert with default, destructive, info, success, warning and inverted tones, a title, a description and an action slot.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
It installs to components/reui/alert.tsx, next to your own components/ui/alert.tsx, so neither replaces the other.
import {
Alert,
AlertAction,
AlertDescription,
AlertTitle,
} from "@/components/reui/alert"<Alert variant="warning">
<AlertTitle>Storage is almost full</AlertTitle>
<AlertDescription>You have used 92% of your plan.</AlertDescription>
<AlertAction>
<Button size="sm">Upgrade</Button>
</AlertAction>
</Alert>| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "info" | "success" | "warning" | "invert" | "default" | The tone. |
AlertTitle, AlertDescription | div props | - | The text parts. |
AlertAction | div props | - | Buttons that sit at the end of the alert on wide screens and below the text on narrow ones. |
The root has role="alert", so a screen reader announces it when it appears. Do not render an alert on page load for content that is not urgent; use a plain callout there. Keep an aria-label on icon-only action buttons and mark decorative icons aria-hidden. Tone is also carried by the title text, never by colour alone.
Based on ReUI (MIT, Copyright (c) 2025 Keenthemes Inc), adapted for tealmac UI. See the third-party notices.