Alert

Feedback

Alert messages with pixel styling.

Import

import { PixelAlert, PixelAlertTitle, PixelAlertDescription } from "@/components/ui/pixel-alert"

Usage

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel-alert.tsx

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import {
  AlertCircle,
  AlertTriangle,
  CheckCircle2,
  XCircle,
} from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelAlertVariants = cva(
  "relative w-full pixel-borders border-4 p-4 transition-none duration-0",
  {
    variants: {
      variant: {
        default:
          "bg-white border-black text-black dark:bg-[#1a1a1a] dark:border-[#ff8c00] dark:text-white",
        info: "bg-[#add8e6] border-[#0000ff] text-black",
        success: "bg-[#90ee90] border-[#00ff00] text-black",
        warning: "bg-[#ffd700] border-[#ffa500] text-black",
        error: "bg-[#ffcccb] border-[#ff0000] text-black",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
);

const iconMap = {
  default: AlertCircle,
  info: AlertCircle,
  success: CheckCircle2,
  warning: AlertTriangle,
  error: XCircle,
};

export interface PixelAlertProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelAlertVariants> {
  showIcon?: boolean;
}

const PixelAlert = React.forwardRef<HTMLDivElement, PixelAlertProps>(
  (
    { className, variant = "default", showIcon = true, children, ...props },
    ref,
  ) => {

// ... (more code below)

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.