Alert

"use client"

import { Alert } from "@/registry/warren/alert/alert"

export default function AlertDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Alert variant="danger" title="HALT: ROUTE DEGRADED">
        RETRY 03 — SWITCHING TO FALLBACK PATH
      </Alert>
      <Alert variant="success" title="SYNC COMPLETE">
        ALL NODES REPORTED WITHIN LATENCY BUDGET
      </Alert>
    </div>
  )
}

Installation

npx shadcn@latest add https://warren.eduard3v.com/r/alert.json

Usage

import { Alert } from "@/components/ui/alert"

<Alert variant="danger" title="HALT: ROUTE DEGRADED">
  RETRY 03 — SWITCHING TO FALLBACK PATH
</Alert>

Variants

default · primary · success · danger · warning

The variant selects the 2px square border token; default keeps the neutral border, while the tone variants use the saturated signal borders (border-primary, border-success, border-danger, border-warning) on the panel background. The title renders in bold mono caps and the body in muted mono.

The danger variant renders role="alert" (assertive); all other variants render role="status" (polite) — non-danger alerts announce without interrupting the screen-reader queue.

API Reference