Alert

bunx --bun harukit@latest add alert

npx harukit@latest add alert

pnpm dlx harukit@latest add alert

yarn dlx harukit@latest add alert

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

export function BasicAlert() {
  return (
    <Alert>
      <AlertTitle>Alert Title</AlertTitle>
      <AlertDescription>
        This is an important message that requires the user's attention.
      </AlertDescription>
    </Alert>
  );
}

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

export function AlertVariants() {
  return (
    <div className="space-y-4">
      <Alert>
        <AlertTitle>Default Alert</AlertTitle>
        <AlertDescription>
          This is a default alert message.
        </AlertDescription>
      </Alert>

      <Alert variant="destructive">
        <AlertTitle>Destructive Alert</AlertTitle>
        <AlertDescription>
          This is a destructive alert message indicating an error or warning.
        </AlertDescription>
      </Alert>
    </div>
  );
}

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

export function AlertWithIcon() {
  return (
    <Alert>
      <Info className="h-4 w-4" />
      <AlertTitle>Information</AlertTitle>
      <AlertDescription>
        You can add icons to your alerts for better visual communication.
      </AlertDescription>
    </Alert>
  );
}