Primitives
Alert
Inline status panel for callouts, errors, and notices.
Composition
The preferred shape for composing the installed primitive from its exported parts.
Parts
Exported compound parts from the installed source.
Alert├── AlertTitle└── AlertDescriptionThe refined source installs this primitive from src/registry/sources/refined/ui/alert.tsx. Install it on its own with the command above, or inspect the source below.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/alert.jsonRaw code
Primary installed primitive source
Alert slot
src/registry/sources/refined/ui/alert.tsx
import { cva } from "class-variance-authority";import type { AlertDescriptionProps, AlertProps, AlertTitleProps } from "@/components/refined-ui/contracts";import { cn } from "@/components/refined-ui/lib/cn";import { skinSlot } from "@/components/refined-ui/skin";// Plain semantic alert (no Base UI): grid layout, has-[>svg] switches on a leading icon column.// `destructive` only re-tints via --destructive, no structural change.const alertVariant = cva( "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-[var(--radius-lg)] border bg-card px-4 py-3 text-sm text-card-foreground has-[>svg]:grid-cols-[1rem_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", { variants: { variant: { default: "", destructive: "border-destructive/50 text-destructive *:data-[slot=alert-description]:text-destructive/90", }, }, defaultVariants: { variant: "default", }, },);export function Alert({ variant = "default", className, ...props }: AlertProps) { return ( <div role="alert" data-ui="agent" data-slot="alert" data-variant={variant} className={cn(alertVariant({ variant }), skinSlot("alert", { variant }), className)} {...props} /> );}export function AlertTitle({ className, ...props }: AlertTitleProps) { return ( <div data-ui="agent" data-slot="alert-title" className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)} {...props} /> );}export function AlertDescription({ className, ...props }: AlertDescriptionProps) { return ( <div data-ui="agent" data-slot="alert-description" className={cn("col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed", className)} {...props} /> );}