Basic Alerts

Plain alerts with an icon, title, and message in a soft container. Use for everyday notices like saved changes, confirmations, and short tips.

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { AlertCircle, AlertTriangle, CheckCircle, XCircle } from "lucide-react";

export default function BasicAlerts() {
  return (
    <div className="flex flex-col gap-4 p-6">
      <Alert className="shadow-sm">
        <AlertTitle>Default Alert</AlertTitle>
        <AlertDescription>
          This is a default alert with subtle shadow.
        </AlertDescription>
      </Alert>

      <Alert variant="destructive" className="shadow-sm">
        <XCircle className="h-4 w-4" />
        <AlertTitle>Destructive Alert</AlertTitle>
        <AlertDescription>
          This alert is used for error messages and destructive actions.
        </AlertDescription>
      </Alert>

      <Alert className="border-green-500/50 text-green-700 dark:border-green-500 dark:text-green-400 [&>svg]:text-green-500 shadow-sm">
        <CheckCircle className="h-4 w-4" />
        <AlertTitle>Success Alert</AlertTitle>
        <AlertDescription>
          This alert indicates a successful action or positive outcome.
        </AlertDescription>
      </Alert>

      <Alert className="border-yellow-500/50 text-yellow-700 dark:border-yellow-500 dark:text-yellow-400 [&>svg]:text-yellow-500 shadow-sm">
        <AlertTriangle className="h-4 w-4" />
        <AlertTitle>Warning Alert</AlertTitle>
        <AlertDescription>
          This alert warns users about potential issues or important
          information.
        </AlertDescription>
      </Alert>

      <Alert className="border-blue-500/50 text-blue-700 dark:border-blue-500 dark:text-blue-400 [&>svg]:text-blue-500 shadow-sm">
        <AlertCircle className="h-4 w-4" />
        <AlertTitle>Info Alert</AlertTitle>
        <AlertDescription>
          This alert provides general information to the user.
        </AlertDescription>
      </Alert>
    </div>
  );
}

About this block

Basic Alerts is a stacked set of five alert variants. Each row holds a soft container with a subtle shadow, a small status icon on the left, a bold title, and a one or two sentence description beneath it. The five variants cover the full tonal range: a neutral default with no icon, then destructive, success, warning, and info, each coloured to match its intent.

Every alert is independent. You can use any single variant on its own, reorder them, or drop the ones your project does not need. The title and description copy is plain text, so updating the message for your context takes seconds.

When to use

Reach for this block when you need a clean, legible notice that fits anywhere on the page without drama. It suits confirmation screens, form submission results, account settings pages, and inline feedback inside a creative agency or studio workflow where the message must read clearly against a minimal layout. Compared to accent or bordered variants, the basic style stays out of the way and lets the copy carry the weight.

A natural flow around it on a Components page:

Before

Badges to label the current state before the alert explains it in full
A short section heading or descriptive paragraph that sets the context for the notice below

After

Buttons to give users a clear action once they have read the alert
Compact Alerts if you need a denser follow-up notice in a tighter area of the same view

What you can display

These alerts work for any short feedback message that needs a tone cue. A few concrete uses:

Form feedback. Show a success alert after a project brief is submitted, or a destructive alert when a required field is missing.
System notices. Use the info or warning variant to surface account limits, billing reminders, or maintenance windows to studio clients.
Action results. Confirm that a file was saved, a collaborator was invited, or a draft was discarded with the matching tonal variant.

Tip: pair the alert title with a short action verb ("File saved", "Access denied") so users grasp the outcome before reading the detail.

About this block

When to use

A natural flow around it on a Components page:

Before

Badges to label the current state before the alert explains it in full
A short section heading or descriptive paragraph that sets the context for the notice below

After

Buttons to give users a clear action once they have read the alert
Compact Alerts if you need a denser follow-up notice in a tighter area of the same view

What you can display

These alerts work for any short feedback message that needs a tone cue. A few concrete uses:

Form feedback. Show a success alert after a project brief is submitted, or a destructive alert when a required field is missing.
System notices. Use the info or warning variant to surface account limits, billing reminders, or maintenance windows to studio clients.
Action results. Confirm that a file was saved, a collaborator was invited, or a draft was discarded with the matching tonal variant.

Tip: pair the alert title with a short action verb ("File saved", "Access denied") so users grasp the outcome before reading the detail.

Basic Alerts

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display