Components
Alert

Alert

A modal dialog that interrupts the user with important content and expects a response.

How it works

Install the following dependencies:

pnpm add motion class-variance-authority tailwind-merge clsx

Create a new file at lib/utils.ts and add the provided code.

import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

Create a file at components/ui/alert.tsx and paste the given code.

alert.tsx

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
 
import { cn } from "@/lib/utils";
import { HTMLMotionProps, motion } from "motion/react";
 
const alertVariants = cva(
    "relative w-full rounded-lg border dark:border-neutral-800 px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg~*]:pl-7",
    {
        variants: {
            variant: {
                default: "bg-background text-foreground",
                error: "border-amber-600 text-amber-600 dark:border-amber-500 dark:text-amber-500",
                warning:
                    "border-red-600 text-red-600 dark:border-red-500 dark:text-red-500",
                success:
                    "border-emerald-600 text-emerald-600 dark:border-emerald-500 dark:text-emerald-500",
            },
        },
        defaultVariants: {
            variant: "default",
        },
    },
);
 
const _Alert = React.forwardRef<
    HTMLDivElement,
    HTMLMotionProps<"div"> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
    <motion.div
        ref={ref}
        role="alert"
        className={cn(alertVariants({ variant }), className)}
        {...props}
    />
));
 
_Alert.displayName = "Alert";
 
const _AlertTitle = React.forwardRef<HTMLDivElement, HTMLMotionProps<"h5">>(
    ({ className, ...props }, ref) => (
        <motion.h5
            ref={ref}
            className={cn("mb-1 font-medium leading-none", className)}
            {...props}
        />
    ),
);
 
_AlertTitle.displayName = "AlertTitle";
 
const _AlertItem = React.forwardRef<HTMLDivElement, HTMLMotionProps<"div">>(
    ({ className, ...props }, ref) => (
        <motion.div ref={ref} className={cn("py-1", className)} {...props} />
    ),
);
 
_AlertItem.displayName = "AlertItem";
 
const _AlertDescription = React.forwardRef<
    HTMLDivElement,
    HTMLMotionProps<"div">
>(({ className, ...props }, ref) => (
    <motion.div
        ref={ref}
        className={cn("text-sm [&_p]:leading-relaxed", className)}
        {...props}
    />
));
 
_AlertDescription.displayName = "AlertDescription";
 
const Alert = motion.create(_Alert);
const AlertItem = motion.create(_AlertItem);
const AlertTitle = motion.create(_AlertTitle);
const AlertDescription = motion.create(_AlertDescription);
 
export { Alert, AlertItem, AlertTitle, AlertDescription };

Import and use the Accordion component in your application.

import React from "react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 
import { CircleAlert, CircleCheck, Terminal } from "lucide-react";
 
const AlertDemo = () => {
    return (
        <div className="flex flex-col space-y-4">
            <Alert>
                <Terminal className="h-4 w-4" />
                <AlertTitle>Heads up!</AlertTitle>
                <AlertDescription>
                    You can add components to your app using the cli.
                </AlertDescription>
            </Alert>
 
            <Alert variant="success">
                <CircleCheck className="-mt-0.5 me-3 inline-flex size-4" />
                <AlertTitle>Completed successfully!</AlertTitle>
                <AlertDescription>
                    You can add components to your app using the cli.
                </AlertDescription>
            </Alert>
 
            <Alert variant="error">
                <CircleAlert className="h-4 w-4" />
                <AlertTitle>An error occurred!</AlertTitle>
                <AlertDescription>
                    You can add components to your app using the cli.
                </AlertDescription>
            </Alert>
 
            <Alert variant="warning">
                <CircleAlert className="h-4 w-4" />
                <AlertTitle>An error occurred!</AlertTitle>
                <AlertDescription>
                    You can add components to your app using the cli.
                </AlertDescription>
            </Alert>
        </div>
    );
};
 
export default AlertDemo;

Examples

Default

Password

Account Action

Privacy