Alert With Background

PreviousNext

An alert with background component

Docs
shadcnui-blockscomponent

Preview

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

export default function AlertWithBackgroundDemo() {
  return (
    <Alert className="bg-muted">
      <OctagonAlertIcon className="size-4" />
      <AlertTitle className="text-foreground">Something Went Wrong</AlertTitle>
      <AlertDescription className="text-foreground">
        An error occurred while processing your request.
      </AlertDescription>
    </Alert>
  );
}

Installation

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

Usage

import { Alert06 } from "@/components/alert-06"
<Alert06 />