Skip to content
VEXA
enes
Feedback

Alert

Server-safe

A prominent, inline message.

Live preview

Rendered from the installed VEXA source — the same files you receive.

Heads up

Obsidian and Graphite themes are available — try the switch in the header.

Installation

Adds the component source to your project. Registry dependencies are pulled in automatically.

npx shadcn@latest add https://vexa.valfiguer.com/r/alert.json

Installs to components/vexa/alert.tsx

npm dependencies

  • class-variance-authority

Registry dependencies

  • @vexa/utils

Other VEXA items this component needs. Install them first — they are resolved automatically by the CLI.

Source

Copy this into its target path, or install it with the command above.

components/vexa/alert.tsx
import type * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

export const alertVariants = cva(
  [
    "relative flex w-full gap-3 rounded-vexa-md border px-4 py-3 text-sm",
    "[&>svg]:size-5 [&>svg]:shrink-0 [&>svg]:translate-y-0.5",
  ],
  {
    variants: {
      variant: {
        info: "border-vexa-border bg-vexa-surface text-vexa-foreground [&>svg]:text-vexa-focus",
        success:
          "border-vexa-success/30 bg-vexa-success/10 text-vexa-foreground [&>svg]:text-vexa-success",
        warning:
          "border-vexa-warning/30 bg-vexa-warning/10 text-vexa-foreground [&>svg]:text-vexa-warning",
        danger:
          "border-vexa-danger/30 bg-vexa-danger/10 text-vexa-foreground [&>svg]:text-vexa-danger",
      },
    },
    defaultVariants: {
      variant: "info",
    },
  },
);

export interface AlertProps
  extends React.ComponentProps<"div">, VariantProps<typeof alertVariants> {}

/**
 * Alert — a prominent, inline message.
 *
 * RSC-safe. Defaults to `role="alert"` (assertive) for the common case of a
 * message shown in response to an action; override `role` (e.g. `"status"`) for
 * passive, always-present notices. Include an icon AND text so the intent is
 * not carried by color alone.
 */
export function Alert({ className, variant, role, ...props }: AlertProps) {
  return (
    <div
      data-slot="alert"
      role={role ?? "alert"}
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  );
}

export function AlertTitle({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="alert-title"
      className={cn("mb-1 font-medium tracking-tight", className)}
      {...props}
    />
  );
}

export function AlertDescription({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-description"
      className={cn(
        "text-sm text-vexa-muted-foreground [&_p]:leading-relaxed",
        className,
      )}
      {...props}
    />
  );
}

Details

Variants

variant
infosuccesswarningdanger

Example

tsx
<Alert variant="danger"><AlertTitle>Payment failed</AlertTitle><AlertDescription>Update your card and retry.</AlertDescription></Alert>

Accessibility

Defaults to role=alert; override to role=status for passive notices. Include an icon + text so intent is not color-only.