"use client"; import { type ComponentProps, forwardRef } from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/utils/cn"; const alertVariants = cva( "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", { variants: { scheme: { default: "bg-background text-foreground", muted: "border-muted/50 text-muted-foreground bg-muted/10 [&>svg]:text-muted-foreground", good: "border-good/50 text-good bg-good/10 [&>svg]:text-good", caution: "border-caution/50 text-caution bg-caution/10 [&>svg]:text-caution", bad: "border-bad/50 text-bad bg-bad/10 [&>svg]:text-bad", }, }, defaultVariants: { scheme: "default" }, } ); export interface AlertProps extends ComponentProps<"div">, VariantProps {} const Alert = forwardRef( ({ className, scheme, ...props }, ref) => (

) ); Alert.displayName = "Alert"; const AlertTitle = forwardRef< HTMLParagraphElement, ComponentProps<"h5"> >(({ className, ...props }, ref) => (

)); AlertTitle.displayName = "AlertTitle"; const AlertDescription = forwardRef< HTMLParagraphElement, ComponentProps<"div"> >(({ className, ...props }, ref) => (
)); AlertDescription.displayName = "AlertDescription"; export { Alert, AlertTitle, AlertDescription, alertVariants };

)); AlertTitle.displayName = "AlertTitle"; const AlertDescription = forwardRef< HTMLParagraphElement, ComponentProps<"div"> >(({ className, ...props }, ref) => ( )); AlertDescription.displayName = "AlertDescription"; export { Alert, AlertTitle, AlertDescription, alertVariants };

)); AlertTitle.displayName = "AlertTitle"; const AlertDescription = forwardRef< HTMLParagraphElement, ComponentProps<"div"> >(({ className, ...props }, ref) => (
)); AlertDescription.displayName = "AlertDescription"; export { Alert, AlertTitle, AlertDescription, alertVariants };

Alert

Heads up!

Anatomy

Installation

Ensure Earthling UI is installed

Import the component from earthling-ui

The component is ready to use

Heads up!