uibloxuiblox
View on GitHub
Components/

Alert

Display important messages to users with contextual feedback.

Installation

Terminal
ReactTailwind
TSX
npx @uiblox/cli add alert

Visual Variations

Toggle between three different visual styles: filled (solid background), soft (tinted), and outline (bordered).

Information

This is an informational alert message.

Success

Your changes have been saved successfully.

Warning

Please review the changes before proceeding.

Basic Usage

Copy & paste ready
<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
</Alert>

Variants

All Variants

Copy & paste ready
<Alert variant="default">...</Alert>
<Alert variant="info">...</Alert>
<Alert variant="success">...</Alert>
<Alert variant="warning">...</Alert>
<Alert variant="destructive">...</Alert>

With Icons

Copy & paste ready
<Alert variant="info">
  <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">...</svg>
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>This alert includes an icon for better visibility.</AlertDescription>
</Alert>

Props

PropTypeDefaultDescription
variant"default" | "info" | "success" | "warning" | "destructive""default"The visual style of the alert
classNamestring-Additional CSS classes

Source Code

alert.tsx
ReactTailwind
TSX
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

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",
  {
    variants: {
      variant: {
        default: "bg-white dark:bg-gray-950 border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-100",
        info: "bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800 text-blue-900 dark:text-blue-100 [&>svg]:text-blue-600",
        success: "bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800 text-green-900 dark:text-green-100 [&>svg]:text-green-600",
        warning: "bg-yellow-50 dark:bg-yellow-950/30 border-yellow-200 dark:border-yellow-800 text-yellow-900 dark:text-yellow-100 [&>svg]:text-yellow-600",
        destructive: "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800 text-red-900 dark:text-red-100 [&>svg]:text-red-600",
      },
    },
    defaultVariants: { variant: "default" },
  }
);

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
));
Alert.displayName = "Alert";

const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
  )
);
AlertTitle.displayName = "AlertTitle";

const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
  )
);
AlertDescription.displayName = "AlertDescription";

export { Alert, AlertTitle, AlertDescription };