Alert

A callout for important information, with optional status colors.

Scheduled maintenance

Projects will be read-only on Saturday from 02:00 to 03:00 UTC.

Shared views are here

Save a filter and share it with your team. Learn more

Payment received

Invoice INV-1042 was paid in full.

Storage almost full

You’ve used 9.2 of 10 GB. Remove old files or add more storage.

Deployment failed

The build for mobile-app exited with code 1.

import {
  CircleCheckIcon,
  InfoIcon,
  MegaphoneIcon,
  OctagonXIcon,
  TriangleAlertIcon,
} from "lucide-react";

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

export default function AlertVariants() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <Alert>
        <MegaphoneIcon />
        <AlertTitle>Scheduled maintenance</AlertTitle>
        <AlertDescription>
          Projects will be read-only on Saturday from 02:00 to 03:00 UTC.
        </AlertDescription>
      </Alert>
      <Alert variant="info">
        <InfoIcon />
        <AlertTitle>Shared views are here</AlertTitle>
        <AlertDescription>
          Save a filter and share it with your team. <a href="#shared-views">Learn more</a>
        </AlertDescription>
      </Alert>
      <Alert variant="success">
        <CircleCheckIcon />
        <AlertTitle>Payment received</AlertTitle>
        <AlertDescription>Invoice INV-1042 was paid in full.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <TriangleAlertIcon />
        <AlertTitle>Storage almost full</AlertTitle>
        <AlertDescription>
          You’ve used 9.2 of 10 GB. Remove old files or add more storage.
        </AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <OctagonXIcon />
        <AlertTitle>Deployment failed</AlertTitle>
        <AlertDescription>The build for mobile-app exited with code 1.</AlertDescription>
      </Alert>
    </div>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add alert
pnpm dlx shadcn@latest add @jarvis/alert

Usage

import { InfoIcon } from "lucide-react";

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

export function MaintenanceAlert() {
  return (
    <Alert variant="info">
      <InfoIcon />
      <AlertTitle>Scheduled maintenance</AlertTitle>
      <AlertDescription>
        Projects will be read-only on Saturday from 02:00 to 03:00 UTC.
      </AlertDescription>
    </Alert>
  );
}

Put an icon first to show it beside the text.

Alerts don't announce themselves. For a message that appears after something the user did, add role="alert" or role="status", or use a toast.

Composition

Alert

Examples

With actions

AlertAction puts buttons in the top right corner. Give an icon-only dismiss button an aria-label.

Scheduled maintenance

Projects will be read-only on Saturday from 02:00 to 03:00 UTC.

Payment received

Invoice INV-1042 was paid in full.

Deployment failed

The build for mobile-app exited with code 1.

import { CircleCheckIcon, MegaphoneIcon, OctagonXIcon, RotateCcwIcon, XIcon } from "lucide-react";

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

export default function AlertWithActions() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      <Alert>
        <MegaphoneIcon />
        <AlertTitle>Scheduled maintenance</AlertTitle>
        <AlertDescription>
          Projects will be read-only on Saturday from 02:00 to 03:00 UTC.
        </AlertDescription>
        <AlertAction>
          <Button variant="ghost" size="icon-sm" aria-label="Dismiss">
            <XIcon />
          </Button>
        </AlertAction>
      </Alert>
      <Alert variant="success">
        <CircleCheckIcon />
        <AlertTitle>Payment received</AlertTitle>
        <AlertDescription>Invoice INV-1042 was paid in full.</AlertDescription>
        <AlertAction>
          <Button variant="secondary" size="xs">
            View
          </Button>
        </AlertAction>
      </Alert>
      <Alert variant="destructive">
        <OctagonXIcon />
        <AlertTitle>Deployment failed</AlertTitle>
        <AlertDescription>The build for mobile-app exited with code 1.</AlertDescription>
        <AlertAction>
          <Button variant="secondary" size="xs">
            <RotateCcwIcon />
            Retry
          </Button>
        </AlertAction>
      </Alert>
    </div>
  );
}

Title only

Your changes were saved.

import { CircleCheckIcon } from "lucide-react";

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

export default function AlertTitleOnly() {
  return (
    <Alert className="max-w-xl">
      <CircleCheckIcon />
      <AlertTitle>Your changes were saved.</AlertTitle>
    </Alert>
  );
}

Without an icon

Two-factor authentication is off

Turn it on in your security settings to protect your account.

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

export default function AlertWithoutIcon() {
  return (
    <Alert className="max-w-xl">
      <AlertTitle>Two-factor authentication is off</AlertTitle>
      <AlertDescription>
        Turn it on in your security settings to protect your account.
      </AlertDescription>
    </Alert>
  );
}

Props

Part	Extends
Alert	<div>
AlertTitle	<div>
AlertDescription	<div>
AlertAction	<div>

Alert

Prop	Type	Default
`variant`	`"default" \| "destructive" \| "info" \| "success" \| "warning"`	`"default"`