Success Alert

PreviousNext

A success alert component

Docs
shadcnui-blockscomponent

Preview

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

export default function AlertSuccessDemo() {
  return (
    <Alert className="border-emerald-600/50 text-emerald-600 dark:border-emerald-600 [&>svg]:text-emerald-600">
      <CircleCheckBigIcon className="size-4" />
      <AlertTitle>Operation Successful</AlertTitle>
      <AlertDescription className="text-emerald-600">
        Your action has been completed successfully
      </AlertDescription>
    </Alert>
  );
}

Installation

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

Usage

import { Alert03 } from "@/components/alert-03"
<Alert03 />