Alert

PreviousNext

Displays a callout for user attention.

Docs
bunduicomponent

Preview

Loading preview…
examples/components/alert/warning/page.tsx
import { AlertCircleIcon } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

export default function AlertWarning() {
  return (
    <Alert variant="destructive" className="*:text-orange-400!">
      <AlertCircleIcon />
      <AlertTitle>Unable to process your payment.</AlertTitle>
      <AlertDescription>Please verify your billing information and try again.</AlertDescription>
    </Alert>
  );
}

Installation

npx shadcn@latest add @bundui/alert-warning

Usage

import { AlertWarning } from "@/components/alert-warning"
<AlertWarning />