Components
Alert
Extended with additional variants and styling options.
Success
Your changes have been saved successfully. The data has been updated and is now live.
Information
This is a default alert with an informational message. Use this to provide helpful context or additional information to users.
Warning
This action cannot be undone. Please review your changes before proceeding with the operation.
Error
Something went wrong. Please check your input and try again. If the problem persists, contact support.
<Alert variant="success">
<CheckCircleIcon />
<AlertTitle>Success</AlertTitle>
<AlertDescription>
Your changes have been saved successfully. The data has been updated and is
now live.
</AlertDescription>
</Alert>
<Alert variant="info">
<InfoIcon />
<AlertTitle>Information</AlertTitle>
<AlertDescription>
This is a default alert with an informational message. Use this to provide
helpful context or additional information to users.
</AlertDescription>
</Alert>
<Alert variant="warning">
<AlertTriangleIcon />
<AlertTitle>Warning</AlertTitle>
<AlertDescription>
This action cannot be undone. Please review your changes before proceeding
with the operation.
</AlertDescription>
</Alert>
<Alert variant="error">
<AlertCircleIcon />
<AlertTitle>Error</AlertTitle>
<AlertDescription>
Something went wrong. Please check your input and try again. If the problem
persists, contact support.
</AlertDescription>
</Alert>Installation
npx shadcn@latest add https://yuki-ui.vercel.app/r/tabs.jsonnpx shadcn@latest add https://yuki-ui.vercel.app/r/tabs.jsonpnpm dlx shadcn@latest add https://yuki-ui.vercel.app/r/tabs.jsonbunx --bun shadcn@latest add https://yuki-ui.vercel.app/r/tabs.jsonCopy and paste the following code into your project.
import type { VariantProps } from 'class-variance-authority'
import * as React from 'react'
import { cva } 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',
success:
'text-success bg-success/5 border-success *:data-[slot=alert-description]:text-success/90 [&>svg]:text-current',
info: 'text-info bg-info/5 border-info *:data-[slot=alert-description]:text-info/90 [&>svg]:text-current',
warning:
'text-warning bg-warning/5 border-warning *:data-[slot=alert-description]:text-warning/90 [&>svg]:text-current',
error:
'text-error bg-error/5 border-error *:data-[slot=alert-description]:text-error/90 [&>svg]:text-current',
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 [&_p]:leading-relaxed',
className,
)}
{...props}
/>
)
}
export { Alert, AlertTitle, AlertDescription }