Docs › Components › Alert

Shadcn Alert

The shadcn/ui Alert is a copy-paste inline callout for notes, warnings, and errors, styled with Tailwind CSS v4. It pairs a title, a description, and an optional icon, and ships a destructive variant for errors. Alerts surface inline messages across ShadcnStore blocks.

Key features

• Two variants: default and destructive (error).
• Composable AlertTitle and AlertDescription parts.
• Icon support with automatic spacing.
• Static and inline: no state, portal, or dependency.

Installation

npx shadcn@latest add alert

Usage

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"
import { Terminal } from "lucide-react"

export function Example() {
  return (
    <Alert>
      <Terminal className="size-4" />
      <AlertTitle>Heads up</AlertTitle>
      <AlertDescription>
        You can add components to your app using the CLI.
      </AlertDescription>
    </Alert>
  )
}

Destructive variant

import { AlertCircle } from "lucide-react"

<Alert variant="destructive">
  <AlertCircle className="size-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Your session has expired.</AlertDescription>
</Alert>

Props

Prop	Type	Default	Description
variant	default | destructive	default	Visual treatment.

Alert, AlertTitle, and AlertDescription forward native attributes and accept Tailwind overrides.

Accessibility

• For messages that appear in response to an action, add role="alert" so assistive tech announces them immediately.
• Do not rely on the destructive color alone; the title text should also convey that it is an error.
• Keep alerts concise, and put any recovery action in a nearby Button.

When to use the Alert

Use an Alert for a persistent, inline message tied to the current view: a setup note, a validation summary, or an error banner. For transient confirmations that fade on their own, use a Toast. For a blocking confirmation the user must act on, use a Dialog.

Used in these blocks

• Apps: inline status and error banners.
• Checkout forms: payment and validation messages.
• Login forms: auth error messages.

Related components

An Alert often summarizes Form errors, sits inside a Card, and pairs with a Badge for status. For overlay confirmations use a Dialog.

FAQ

What is the shadcn alert used for?

The Alert is a static callout that highlights inline information such as a note, warning, or error within the page layout.

What is the difference between Alert and Toast?

Alert is persistent and sits inline in the page. Toast (Sonner) is a transient notification that appears and disappears on its own.

How do I make an alert an error style?

Set variant to destructive on the Alert to apply the error color treatment to the border, icon, and title.

Can I add an action button to an alert?

Yes. Place a Button inside or beside the alert for recovery actions like retry or dismiss.