Creative Tim UICreative Tim UI

Shadcn Alert

PreviousNext

A component for displaying important messages to users, typically used for notifications, warnings, errors, and informational content.

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

export function AlertDemo() {
  return (
    <Alert>
      <AlertDescription>A simple alert for showing message.</AlertDescription>
    </Alert>
  )
}

Installation

pnpm dlx @creative-tim/ui@latest add alert

Usage

import { Alert, AlertDescription } from "@/components/ui/alert"
<Alert>
  <AlertDescription>Your message here.</AlertDescription>
</Alert>

Examples

Alert Icon

An alert component with an icon to provide visual context and enhance the message's meaning, making it easier for users to quickly understand the alert type.

import { AlertCircle } from "lucide-react"

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

export function AlertIcon() {
  return (
    <Alert>
      <AlertCircle className="h-4 w-4" />
      <AlertDescription>A simple alert for showing message.</AlertDescription>
    </Alert>
  )
}

Alert Colors

A collection of alert components with different color schemes (primary, secondary, info, success, warning, error) to visually distinguish between different types of messages and their importance levels.

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

export function AlertColors() {
  return (
    <div className="w-full space-y-2">
      <Alert className="border-primary bg-primary/10 text-primary [&>svg]:text-primary">
        <AlertDescription>
          A simple alert for showing message, with color="primary"
        </AlertDescription>
      </Alert>
      <Alert className="border-secondary bg-secondary/10 text-secondary [&>svg]:text-secondary">
        <AlertDescription>
          A simple alert for showing message, with color="secondary"
        </AlertDescription>
      </Alert>
      <Alert className="border-blue-500 bg-blue-500/10 text-blue-500 [&>svg]:text-blue-500">
        <AlertDescription>
          A simple alert for showing message, with color="info"
        </AlertDescription>
      </Alert>
      <Alert className="border-green-500 bg-green-500/10 text-green-500 [&>svg]:text-green-500">
        <AlertDescription>
          A simple alert for showing message, with color="success"
        </AlertDescription>
      </Alert>
      <Alert className="border-yellow-500 bg-yellow-500/10 text-yellow-500 [&>svg]:text-yellow-500">
        <AlertDescription>
          A simple alert for showing message, with color="warning"
        </AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <AlertDescription>
          A simple alert for showing message, with color="error"
        </AlertDescription>
      </Alert>
    </div>
  )
}

Alert Variants

Alert components with different visual styles including ghost, outline, solid, and gradient variants, allowing you to choose the appearance that best fits your design system.

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

export function AlertVariants() {
  return (
    <div className="w-full space-y-2">
      <Alert className="border-none bg-transparent shadow-none">
        <AlertDescription>
          A simple alert for showing message, with variant="ghost"
        </AlertDescription>
      </Alert>
      <Alert className="bg-transparent">
        <AlertDescription>
          A simple alert for showing message. with variant="outline"
        </AlertDescription>
      </Alert>
      <Alert className="bg-primary text-primary-foreground border-primary">
        <AlertDescription>
          A simple alert for showing message. with variant="solid"
        </AlertDescription>
      </Alert>
      <Alert className="from-primary to-primary/80 text-primary-foreground border-primary bg-gradient-to-r">
        <AlertDescription>
          A simple alert for showing message. with variant="gradient"
        </AlertDescription>
      </Alert>
    </div>
  )
}

Alert Dismissible

An alert component with a close button that allows users to dismiss the message, providing control over the visibility of notifications and reducing visual clutter.

"use client"

import { useState } from "react"
import { AlertCircle, X } from "lucide-react"

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

export function AlertDismissible() {
  const [isOpen, setIsOpen] = useState(true)

  if (!isOpen) return null

  return (
    <Alert>
      <AlertCircle className="h-4 w-4" />
      <AlertDescription>A simple alert for showing message.</AlertDescription>
      <Button
        variant="ghost"
        size="icon"
        className="absolute top-2 right-2 h-6 w-6"
        onClick={() => setIsOpen(false)}
      >
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </Button>
    </Alert>
  )
}

Alert Custom Close Icon

An alert component with a custom close button that can be styled or positioned differently, offering more flexibility in the dismissible alert design.

"use client"

import { useState } from "react"
import { AlertCircle, X } from "lucide-react"

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

export function AlertCustomCloseIcon() {
  const [isOpen, setIsOpen] = useState(true)

  if (!isOpen) return null

  return (
    <Alert className="items-center">
      <AlertCircle className="h-4 w-4" />
      <AlertDescription>
        Sorry, something went wrong please try again.
      </AlertDescription>
      <Button
        variant="ghost"
        size="sm"
        className="absolute top-2 right-2"
        onClick={() => setIsOpen(false)}
      >
        Close
      </Button>
    </Alert>
  )
}

Alert Custom Styles

An alert component with fully customized styling including custom borders, colors, and backgrounds, demonstrating how to adapt the alert to match specific design requirements.

import { CheckCircle } from "lucide-react"

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

export function AlertCustomStyles() {
  return (
    <Alert className="rounded-none border-t-0 border-r-0 border-b-0 border-l-4 border-green-500 bg-green-500/10 font-medium text-green-500">
      <CheckCircle className="h-4 w-4" />
      <AlertDescription>A simple alert for showing message.</AlertDescription>
    </Alert>
  )
}

Alert With Content

An alert component that includes both a title and detailed description, perfect for displaying more comprehensive information and structured content to users.

"use client"

import { useState } from "react"
import { CheckCircle, X } from "lucide-react"

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

export function AlertWithContent() {
  const [isOpen, setIsOpen] = useState(true)

  if (!isOpen) return null

  return (
    <Alert>
      <CheckCircle className="h-4 w-4" />
      <div className="flex-1">
        <AlertTitle>Success</AlertTitle>
        <AlertDescription>
          I don&apos;t know what that word means. I&apos;m happy. But success,
          that goes back to what in somebody&apos;s eyes success means. For me,
          success is inner peace. That&apos;s a good day for me.
        </AlertDescription>
      </div>
      <Button
        variant="ghost"
        size="icon"
        className="absolute top-2 right-2 h-6 w-6"
        onClick={() => setIsOpen(false)}
      >
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </Button>
    </Alert>
  )
}

Alert With List

An alert component that contains a list of items, ideal for displaying requirements, instructions, or multiple related pieces of information in an organized format.

import { AlertCircle } from "lucide-react"

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

export function AlertWithList() {
  return (
    <div className="flex w-full flex-col gap-2">
      <Alert className="border-none bg-transparent shadow-none">
        <AlertCircle className="h-4 w-4" />
        <AlertDescription>
          <div className="mt-0.5">
            <p className="mb-1 font-bold">
              Ensure that these requirements are met:
            </p>
            <ul className="mt-2 ml-2 list-inside list-disc space-y-1 text-sm">
              <li>At least 10 characters (and up to 100 characters)</li>
              <li>At least one lowercase character</li>
              <li>
                Inclusion of at least one special character, e.g., ! @ # ?
              </li>
            </ul>
          </div>
        </AlertDescription>
      </Alert>

      <Alert className="bg-transparent">
        <AlertCircle className="h-4 w-4" />
        <AlertDescription>
          <div className="mt-0.5">
            <p className="mb-1 font-bold">
              Ensure that these requirements are met:
            </p>
            <ul className="mt-2 ml-2 list-inside list-disc space-y-1 text-sm">
              <li>At least 10 characters (and up to 100 characters)</li>
              <li>At least one lowercase character</li>
              <li>
                Inclusion of at least one special character, e.g., ! @ # ?
              </li>
            </ul>
          </div>
        </AlertDescription>
      </Alert>

      <Alert className="bg-primary text-primary-foreground border-primary">
        <AlertCircle className="h-4 w-4" />
        <AlertDescription>
          <div className="mt-0.5">
            <p className="mb-1 font-bold">
              Ensure that these requirements are met:
            </p>
            <ul className="mt-2 ml-2 list-inside list-disc space-y-1 text-sm">
              <li>At least 10 characters (and up to 100 characters)</li>
              <li>At least one lowercase character</li>
              <li>
                Inclusion of at least one special character, e.g., ! @ # ?
              </li>
            </ul>
          </div>
        </AlertDescription>
      </Alert>

      <Alert className="from-primary to-primary/80 text-primary-foreground border-primary bg-gradient-to-r">
        <AlertCircle className="h-4 w-4" />
        <AlertDescription>
          <div className="mt-0.5">
            <p className="mb-1 font-bold">
              Ensure that these requirements are met:
            </p>
            <ul className="mt-2 ml-2 list-inside list-disc space-y-1 text-sm">
              <li>At least 10 characters (and up to 100 characters)</li>
              <li>At least one lowercase character</li>
              <li>
                Inclusion of at least one special character, e.g., ! @ # ?
              </li>
            </ul>
          </div>
        </AlertDescription>
      </Alert>
    </div>
  )
}

Props

The alert component is built using class-variance-authority and accepts the following props:

Alert (Root Component)

PropTypeDefaultDescription
variantstring"default"The visual style variant of the alert
classNamestring-Additional CSS classes to apply to the alert container
childrenReactNode-The content to display inside the alert

AlertTitle

PropTypeDefaultDescription
classNamestring-Additional CSS classes to apply to the title
childrenReactNode-The title text to display

AlertDescription

PropTypeDefaultDescription
classNamestring-Additional CSS classes to apply to the description
childrenReactNode-The description text or content to display

Best Practices

  • Use alerts to communicate important information that requires user attention
  • Choose appropriate colors and variants to match the message type (error, warning, success, info)
  • Keep alert messages concise and actionable
  • Provide clear titles when displaying complex information
  • Use dismissible alerts for non-critical messages that users can safely ignore
  • Ensure sufficient color contrast for accessibility
  • Consider using icons to enhance visual recognition
  • Avoid overusing alerts to prevent alert fatigue
  • Use lists within alerts when presenting multiple related items

The alert component provides a flexible and accessible way to display important messages to users. It's ideal for notifications, form validation feedback, system status updates, and any interface where clear communication is essential.