Warning Alert

PreviousNext

A warning alert component

Docs
shadcnui-blockscomponent

Preview

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

export default function AlertWarningDemo() {
  return (
    <Alert className="border-amber-500/50 text-amber-500 dark:border-amber-500 [&>svg]:text-amber-500">
      <AlertTriangleIcon className="size-4" />
      <AlertTitle>Proceed with Caution</AlertTitle>
      <AlertDescription className="text-amber-500">
        This action might have unintended consequences.
      </AlertDescription>
    </Alert>
  );
}

Installation

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

Usage

import { Alert04 } from "@/components/alert-04"
<Alert04 />