Docs
Alert

Alert

Displays a callout for user attention.

Installation

Copy and paste the following code into your project.

import { cva, type VariantProps } from 'class-variance-authority';
import clsx from 'clsx';
import { forwardRef, HTMLAttributes } from 'react';
import styles from './styles.module.scss';
 
const alertVariants = cva(styles.base, {
    variants: {
        variant: {
            default: styles.variant__default,
            destructive: styles.variant__destructive,
        },
    },
    defaultVariants: {
        variant: 'default',
    },
});
 
const Alert = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>>(
    ({ className, variant, ...props }, ref) => (
        <div ref={ref} role='alert' className={clsx(alertVariants({ variant }), className)} {...props} />
    )
);
Alert.displayName = 'Alert';
 
const AlertTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>(
    ({ className, ...props }, ref) => <h5 ref={ref} className={clsx(styles.alert__title, className)} {...props} />
);
AlertTitle.displayName = 'AlertTitle';
 
const AlertDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
    ({ className, ...props }, ref) => (
        <div ref={ref} className={clsx(styles.alert__description, className)} {...props} />
    )
);
AlertDescription.displayName = 'AlertDescription';
 
export { Alert, AlertDescription, AlertTitle };

Update the import paths to match your project setup.

Usage

import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
<Alert>
    <Terminal className='h-4 w-4' />
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>You can add components and dependencies to your app using the cli.</AlertDescription>
</Alert>

Examples

Default

Destructive