Alert

npx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/alert.json

yarn dlx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/alert.json

pnpx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/alert.json

bunx shadcn@latest add https://ssp-ui-registry-staging.sh3.agoralab.co/r/alert.json

import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from "lucide-react"import { Alert, AlertDescription, AlertTitle } from "@/registry/ssp/ui/alert"export default function Example() {return (  <div className='grid w-full max-w-xl items-start gap-4'>    <Alert>      <CheckCircle2Icon />      <AlertTitle>Success! Your changes have been saved</AlertTitle>      <AlertDescription>        This is an alert with icon, title and description.      </AlertDescription>    </Alert>    <Alert>      <PopcornIcon />      <AlertTitle>        This Alert has a title and an icon. No description.      </AlertTitle>    </Alert>    <Alert variant='destructive'>      <AlertCircleIcon />      <AlertTitle>Unable to process your payment.</AlertTitle>      <AlertDescription>        <p>Please verify your billing information and try again.</p>        <ul className='list-inside list-disc text-sm'>          <li>Check your card details</li>          <li>Ensure sufficient funds</li>          <li>Verify billing address</li>        </ul>      </AlertDescription>    </Alert>  </div>)}