Alert
An inline message with an icon and accent color variant.
Install
npx shadcn add @clearly/alertPreview
Info
Your changes have been saved successfully.
Error
Failed to connect. Check your network and try again.
Usage
import { Alert } from "@/components/ui/alert"
<Alert />Every Clearly component also accepts glass (subtle·medium·strong), specular and className.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "default" | Border color and text tint. |
glass | "Subtle" | "Medium" | "Strong" | "Medium" | Glass depth of the alert surface. |
specular | boolean | true | Directional specular highlight. |
radius | number | 16 | Corner radius in px. |
raised | boolean | false | Use the raised glass-bg-2 background. |