Design System Builder

Alert

Alert is a component component that provides alert functionality.

Active
Heads up!
You can add components and dependencies to your app using the cli.

Examples

variant

Different variant options for the Alert component.

default

Heads up!
You can add components and dependencies to your app using the cli.

destructive

Error
There was a problem with your request.

Installation

npm install @your-design-system/alert
import { AlertCircle, CheckCircle2 } from "lucide-react"
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"

export function AlertDemo() {
  return (
    <div className="grid w-full max-w-xl items-start gap-4">
      <Alert>
        <CheckCircle2 className="h-4 w-4" />
        <AlertTitle>Success!</AlertTitle>
        <AlertDescription>
          Your changes have been saved successfully.
        </AlertDescription>
      </Alert>
      
      <Alert variant="destructive">
        <AlertCircle className="h-4 w-4" />
        <AlertTitle>Error</AlertTitle>
        <AlertDescription>
          Your session has expired. Please log in again.
        </AlertDescription>
      </Alert>
    </div>
  )
}

API Reference

PropTypeDefaultDescription
children*string-

The content to display inside the component.

titlestring-

The title prop for the component.

iconbooleantrue

The icon prop for the component.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

relativew-fullrounded-lgborderp-4

variant Variants

default

bg-backgroundtext-foreground

destructive

border-destructive/50text-destructivedark:border-destructive

Design System Compliance

This component is validated against atomic design principles and foundation token usage.