Alert

Displays a callout for user attention.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/alert.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Default

Heads up!

You can add components to your app using the cli.

Destructive

Error

Your session has expired. Please log in again.

Without Icon

Note

This alert has no leading icon, just title and description.

Title Only

Changes saved successfully.

Usage

How to use this component in your code.

{/* Default */}
<Alert>
  <Terminal className="h-4 w-4" />
  <AlertTitle>Title</AlertTitle>
  <AlertDescription>Description</AlertDescription>
</Alert>

{/* Destructive */}
<Alert variant="destructive">
  <AlertCircle className="h-4 w-4" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Description</AlertDescription>
</Alert>

{/* Without icon */}
<Alert>
  <AlertTitle>Note</AlertTitle>
  <AlertDescription>Description</AlertDescription>
</Alert>