Shadcn Alert for React

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

<div className="grid w-full max-w-md items-start gap-4">
  <Alert>
    <CheckCircle2Icon aria-hidden="true" />
    <AlertTitle>Payment successful</AlertTitle>
    <AlertDescription>
      Your payment of $29.99 has been processed. A receipt has been sent to
      your email address.
    </AlertDescription>
  </Alert>
  <Alert>
    <InfoIcon aria-hidden="true" />
    <AlertTitle>New feature available</AlertTitle>
    <AlertDescription>
      We&apos;ve added dark mode support. You can enable it in your account
      settings.
    </AlertDescription>
  </Alert>
</div>