Alert

Copyimport { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { CircleAlert, Info } from "lucide-react";
 
// Default
<Alert>
  <Info className="size-4" />
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>Your session expires in 30 minutes.</AlertDescription>
</Alert>
 
// Destructive
<Alert variant="destructive">
  <CircleAlert className="size-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Something went wrong. Please try again.</AlertDescription>
</Alert>
 
// Without title
<Alert>
  <AlertDescription>Changes saved successfully.</AlertDescription>
</Alert>

Copy# Mint — Alert Specs
 
## Component
- name: alert
- file: registry/mint/alert.tsx
- installs to: components/ui/alert.tsx
- dependencies: class-variance-authority
 
## What is it
A static, non-interactive callout for surfacing important information to users.
Use it for form errors, system status, confirmations, and warnings. Not to be
confused with a Toast (transient) or Dialog (requires action) — Alert is
persistent and inline within the page flow.
 
## Visual identity
Minimal and contained. Generously rounded corners (Mint's 1.25rem radius), a
soft glassy border, and card background give it a subtle frame without visual
weight. The icon anchors the content and communicates intent at a glance.
Destructive variant uses --destructive for text and icon while keeping the
same card background — restrained, not alarming.
 
## Design tokens
--card: oklch(1 0 0)                     — alert background
--card-foreground: oklch(0.145 0 0)      — default text
--destructive: oklch(0.55 0.25 15)       — destructive text and icon
--border: oklch(0.88 0.04 155 / 60%)     — alert border
--muted-foreground: oklch(0.52 0.06 155) — description text
--radius: 1.25rem                        — rounded-lg
 
## Dark theme
--card: oklch(0.205 0 0)
--card-foreground: oklch(0.985 0 0)
--border: oklch(0.32 0.05 155 / 40%)
--muted-foreground: oklch(0.6 0.06 155)
 
## shadcn config (components.json)
- style: new-york
- rsc: true
- tsx: true
- baseColor: neutral
- cssVariables: true
- iconLibrary: lucide
- aliases:
  - components → @/components
  - ui → @/components/ui
  - utils → @/lib/utils
  - lib → @/lib
  - hooks → @/hooks
 
## Variants
- default     → card background, foreground text. Neutral info, tip, or notice.
- destructive → destructive-colored text and icon. Errors and warnings only.
 
## Layout
- Uses CSS grid: icon column (16px) + content column (1fr)
- has-[>svg] selector activates the icon column automatically
- Without icon: grid-cols-[0_1fr] — icon column collapses, content fills width
- SVG icons: size-4 (16px), translate-y-0.5 for optical alignment with title
 
## States
- No interactive states — Alert is a static display component
- role="alert" for screen readers
 
## Conventions
- Use for persistent, inline messages — not for transient feedback (use Toast)
- AlertTitle is optional — skip it for single-line confirmation messages
- Always pair destructive variant with a descriptive message, not just a title
- Icon size must be size-4 — do not override, grid alignment depends on it
- Avoid using Alert inside a Dialog — use the Dialog description instead