Alert
Status and messaging primitive with semantic variants.
npx shadcn@latest add @aavya/ui-alert
One-time setup — add the @aavya registry to your components.json so branded dependencies resolve to Aavya (not stock shadcn):
"registries": { "@aavya": "https://registry-dev.aavya.com/r/{name}.json" }Or install by full URL: npx shadcn@latest add https://registry-dev.aavya.com/r/ui-alert.json
variant
Alert forwards remaining props to all <div> element props.
Do
- Use Alert for a persistent inline message about the surrounding content.
- Lead with a short title, then the detail; pair any icon with a text label.
- Use the destructive variant for errors only.
Don’t
- Don't use Alert for transient feedback — use a toast (Sonner).
- Don't signal severity with color or icon alone; include words.
- Don't stack many alerts; consolidate them.
Role
role="alert" is set for you — it's a live region announced when it appears.
Keyboard
Not interactive unless it contains a control.
Screen reader
Because of the live role, the message is announced as soon as it's inserted. Keep the text meaningful on its own.
Focus
No focus unless it contains an action.
Gotcha
It's a live region, so reserve Alert for messages worth interrupting for — a static, decorative box with role="alert" is noisy; drop the role for non-urgent notes.
import { Alert } from '@/components/ui/alert'
export default function Example() {
return (
<div className="p-6">
<Alert />
</div>
)
}
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 has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
{
variants: {
variant: {
default: 'bg-card text-card-foreground',
destructive: 'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current'
}
},
defaultVariants: {
variant: 'default'
}
}
)
function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
return <div data-slot='alert' role='alert' className={cn(alertVariants({ variant }), className)} {...props} />
}
function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
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 }: React.ComponentProps<'div'>) {
return (
<div
data-slot='alert-description'
className={cn(
'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm