Alert

Feedback

Persistent contextual feedback with five semantic appearances.

InfoSuccessWarningDestructive

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

alert.tsx

"use client";

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
import { Info, CircleCheck, TriangleAlert, CircleX } from "lucide-react";

export default function AlertExample() {
  return (
    <div className="w-full max-w-lg space-y-3">
      {(
        [
          {
            variant: "info",
            icon: Info,
            title: "Scheduled maintenance",
            description:
              "Your workspace will be read-only between 02:00 and 03:00 UTC.",
          },
          {
            variant: "success",
            icon: CircleCheck,
            title: "Import complete",
            description: "All 128 records are ready to use.",
          },
          {
            variant: "warning",
            icon: TriangleAlert,
            title: "Approaching your storage limit",
            description: "Archive unused files or upgrade your plan.",
          },
          {
            variant: "destructive",
            icon: CircleX,
            title: "Payment needs attention",
            description: "Check your billing details and try again.",
          },
        ] as const
      ).map(({ variant, icon: Icon, title, description }) => (
        <Alert key={variant} variant={variant}>
          <Icon aria-hidden />
          <AlertTitle>{title}</AlertTitle>
          <AlertDescription>{description}</AlertDescription>
        </Alert>
      ))}
    </div>
  );
}

Usage

Compose AlertTitle and AlertDescription inside Alert. Use variant to indicate context. For urgent newly occurring errors, explicitly pass role=alert; visual severity does not automatically interrupt assistive technology.

Import

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";

Shipped as editable source in src/components/ui/alert.tsx in both apps. Copy the implementation below when moving it to another project. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

Component source

The complete implementation is included in both apps. It uses the React, Radix, Lucide, and shared-core dependencies already installed in Apex. Keep your project’s semantic theme tokens when reusing it.

src/components/ui/alert.tsx

import type { ComponentProps } from "react";
import { cn } from "@dashboardpack/core/lib/utils";
const variants = {
  default: "border-border bg-card text-card-foreground",
  info: "border-primary/30 bg-primary/5 text-foreground",
  success: "border-success/30 bg-success/5 text-foreground",
  warning: "border-warning/40 bg-warning/10 text-foreground",
  destructive: "border-destructive/30 bg-destructive/5 text-foreground",
};
export function Alert({
  className,
  variant = "default",
  ...props
}: ComponentProps<"div"> & { variant?: keyof typeof variants }) {
  return (
    <div
      role="status"
      className={cn(
        "relative rounded-xl border p-4 text-sm [&>svg]:mb-2 [&>svg]:size-5",
        variants[variant],
        className,
      )}
      {...props}
    />
  );
}
export function AlertTitle({ className, ...props }: ComponentProps<"h3">) {
  return (
    <h3
      className={cn("mb-1 font-semibold tracking-tight", className)}
      {...props}
    />
  );
}
export function AlertDescription({
  className,
  ...props
}: ComponentProps<"div">) {
  return (
    <div
      className={cn(
        "text-sm leading-relaxed text-muted-foreground [&_a]:underline",
        className,
      )}
      {...props}
    />
  );
}

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

Alert props
Prop	Type / Default	Description
variant	`default \| info \| success \| warning \| destructive` Default: default	Border and surface appearance.
role	`HTML ARIA role` Default: status	Use alert only for urgent announcements.
children	`ReactNode` Default: —	Icon, title, description, and optional actions.
className	`string` Default: —	Extend the outer container.

Build with these too

Sonner (Toast)AlertDialog