Alert

Heads up!

You can add components to your app using the cli.

Installation

Run the following command:

Update your imports:

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

Usage

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
import { AlertCircle } from "lucide-react";
 
export default function Home() {
  return (
    <Alert>
      <AlertCircle />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
    </Alert>
  );
}

Props

Alert

Prop	Type	Default	Description
variant	`default` \| `destructive` \| `success` \| `warning` \| `info` \| `outline`	`default`	Style variant of the alert
size	`sm` \| `default` \| `lg`	`default`	Size of the alert
withIcon	`boolean`	`true`	Show space for icon
icon	`React.ReactNode`	-	Custom icon element to display

HTML Attributes

All Alert components support standard HTML attributes:

Alert

Standard HTML div attributes:

id
role (automatically set to "alert")
aria-* attributes
data-* attributes
Event handlers like onClick, onMouseEnter, etc.

AlertTitle and AlertDescription

Standard HTML div attributes and event handlers.

The Alert components ensure proper accessibility by providing appropriate role attributes and semantic structure.

Alert

Installation

Run the following command:CLIManual

Update your imports:import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"

Usage

Props

Alert

HTML Attributes

Alert

AlertTitle and AlertDescription

Run the following command:

Update your imports:
`import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"`