Alert

Displays a callout for user attention with optional icon, title, and description.

1. Import

Import the alert components from the design system.

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

2. Props

Alert component props.

Prop	Type	Default
variant	"default" \| "destructive"	"default"
className	string	--

3. Usages

Common alert patterns and configurations.

Heads up!

You can add components to your app using the cli.

import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@/design-system/components/ui/alert";
import { Info } from "lucide-react";

export function Example() {
  return (
    <Alert>
      <Info className="h-4 w-4" />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the cli.
      </AlertDescription>
    </Alert>
  );
}