Alert Banner
Inline banner for page-level warnings or confirmations that should stay visible until the user acts. Use it for form-level errors, not for a transient success message, that belongs in a toast instead.
Live preview
open in new tab ↗import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const alertVariants = cva(
"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm",
{
variants: {
variant: {
default: "bg-card text-card-foreground",
destructive: "bg-card text-destructive",
},
},
defaultVariants: { variant: "default" },
}
)
function Alert({ className, variant, ...props }) {
return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
}
function AlertTitle({ className, ...props }) {
return <div data-slot="alert-title" className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)} {...props} />
}
function AlertDescription({ className, ...props }) {
return <div data-slot="alert-description" className={cn("col-start-2 grid gap-1 text-sm text-muted-foreground", className)} {...props} />
}
export { Alert, AlertTitle, AlertDescription }Block id: shadcn-alertreact-tailwind · drop-in
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.