Alert

Inline alert banner with default, info, success, warning, and destructive variants.

Default

Something happened that you should know about.

Heads up!

You can add components via the CLI or copy the source directly.

Component installed

Button has been added to your project.

Update available

A new version of ParticleUI is available.

Error

Your session has expired. Please sign in again.

Code

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

export default function Example() {
  return (
    <Alert>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>You can add components from the CLI.</AlertDescription>
    </Alert>
  )
}

Installation

$npx particleui-cli add alert

Usage

TSX

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

export default function Example() {
  return (
    <Alert>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>You can add components from the CLI.</AlertDescription>
    </Alert>
  )
}

Examples

Variants

Use variant to communicate the severity or nature of the alert.

TSX

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

export default function Example() {
  return (
    <div className="space-y-3">
      <Alert variant="default">
        <AlertTitle>Default</AlertTitle>
        <AlertDescription>A neutral informational alert.</AlertDescription>
      </Alert>
      <Alert variant="info">
        <AlertTitle>Info</AlertTitle>
        <AlertDescription>Helpful context for the user.</AlertDescription>
      </Alert>
      <Alert variant="success">
        <AlertTitle>Success</AlertTitle>
        <AlertDescription>Action completed successfully.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <AlertTitle>Warning</AlertTitle>
        <AlertDescription>Proceed with caution.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <AlertTitle>Destructive</AlertTitle>
        <AlertDescription>This action cannot be undone.</AlertDescription>
      </Alert>
    </div>
  )
}

Props

Prop	Type	Default	Required
icon	boolean	—	no
variant	"default" \| "info" \| "success" \| "warning" \| "destructive"	`"default"`	no

Details

Source filecomponents/ui/alert.tsx

Typeui

Categoriesfeedback, core

npm dependenciestailwind-variants, lucide-react

Registry deps

Claude skill—