Alert Demo

PreviousNext
Docs
aliimamexample

Preview

Loading preview…
registry/default/example/alert/alert-01.tsx
import { Info } from "@aliimam/icons";
import { Alert, AlertDescription, AlertTitle } from "@/registry/default/ui/alert";

export default function Alert01() {
  return (
    <Alert className="border-blue-500/30 bg-blue-50 text-blue-800 dark:bg-blue-950 dark:text-blue-200">
      <Info size={18} />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can use this alert to give users neutral or informational messages.
      </AlertDescription>
    </Alert>
  );
}

Installation

npx shadcn@latest add @aliimam/alert-01

Usage

import { Alert01 } from "@/components/alert-01"
<Alert01 />