Primary Alert

PreviousNext

A primary alert component

Docs
shadcnui-blockscomponent

Preview

Loading preview…
components/customized/alert/alert-01.tsx
import { Alert, AlertDescription, AlertTitle } from "@/registry/ui/alert";
import { CircleFadingArrowUpIcon } from "lucide-react";

export default function AlertDemo() {
  return (
    <Alert>
      <CircleFadingArrowUpIcon className="size-4" />
      <AlertTitle>Update Available</AlertTitle>
      <AlertDescription>
        A new version of the app is now available.
      </AlertDescription>
    </Alert>
  );
}

Installation

npx shadcn@latest add @shadcnui-blocks/alert-01

Usage

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