F

Alert

Inline message for status, warning, and error states

Alerts need minimal styling. They just need to stand out!
import { Alert } from "@/components/ui/alert";


export default function AlertDemo() {
  return (
    <Alert type="warning" className="w-full max-w-md">
      Alerts need minimal styling. They just need to stand out!
    </Alert>
  );
}

Installation

npx shadcn@latest add https://www.deltacomponents.dev/r/alert.json

Usage

1import { Alert } from "@/components/ui/alert";
2

3<Alert type="warning" title="Write-only">
4  Secrets can be replaced but never read back.
5</Alert>

Basic

Flags live in Environment Variables
Any variable prefixed with FLAG_ is read as a feature flag.
import { Alert } from "@/components/ui/alert";


export default function AlertBasic() {
  return (
    <Alert title="Flags live in Environment Variables" className="w-full max-w-md">
      Any variable prefixed with FLAG_ is read as a feature flag.
    </Alert>
  );
}

Types

The pastels sit at one lightness and chroma, so mixed types read as one family. In dark mode each pastel becomes the text colour over a faint wash of itself.

Note
The fill carries the severity on its own.
Tip
The fill carries the severity on its own.
Info
The fill carries the severity on its own.
Warning
The fill carries the severity on its own.
Danger
The fill carries the severity on its own.
Success
The fill carries the severity on its own.
Caution
The fill carries the severity on its own.
import { Alert } from "@/components/ui/alert";


const TYPES = ["note", "tip", "info", "warning", "danger", "success", "caution"] as const;


export default function AlertTypes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {TYPES.map((type) => (
        <Alert key={type} type={type} title={type[0].toUpperCase() + type.slice(1)}>
          The fill carries the severity on its own.
        </Alert>
      ))}
    </div>
  );
}

API Reference

Any other div attribute is passed through to the root. Add role="alert" when the alert appears in response to something, so a screen reader announces it.