Dashed Border Alerts

Alerts outlined with a dashed border for a lighter, sketch like feel. Use for draft notices, placeholders, or optional tips in a quiet tone.

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { AlertCircle, AlertTriangle, CheckCircle, XCircle } from "lucide-react";

export default function DashedBorderAlerts() {
  return (
    <div className="flex flex-col gap-4 p-6">
      <Alert className="border-dashed border-2 shadow-sm">
        <AlertTitle>Default Alert</AlertTitle>
        <AlertDescription>
          This alert has a dashed border style.
        </AlertDescription>
      </Alert>

      <Alert variant="destructive" className="border-dashed border-2 shadow-sm">
        <XCircle className="h-4 w-4" />
        <AlertTitle>Destructive Alert</AlertTitle>
        <AlertDescription>
          This alert has a dashed border style.
        </AlertDescription>
      </Alert>

      <Alert className="border-green-500/50 text-green-700 dark:border-green-500 dark:text-green-400 [&>svg]:text-green-500 border-dashed border-2 shadow-sm">
        <CheckCircle className="h-4 w-4" />
        <AlertTitle>Success Alert</AlertTitle>
        <AlertDescription>
          This alert has a dashed border style.
        </AlertDescription>
      </Alert>

      <Alert className="border-yellow-500/50 text-yellow-700 dark:border-yellow-500 dark:text-yellow-400 [&>svg]:text-yellow-500 border-dashed border-2 shadow-sm">
        <AlertTriangle className="h-4 w-4" />
        <AlertTitle>Warning Alert</AlertTitle>
        <AlertDescription>
          This alert has a dashed border style.
        </AlertDescription>
      </Alert>

      <Alert className="border-blue-500/50 text-blue-700 dark:border-blue-500 dark:text-blue-400 [&>svg]:text-blue-500 border-dashed border-2 shadow-sm">
        <AlertCircle className="h-4 w-4" />
        <AlertTitle>Info Alert</AlertTitle>
        <AlertDescription>
          This alert has a dashed border style.
        </AlertDescription>
      </Alert>
    </div>
  );
}

About this block

Dashed Border Alerts is a vertical stack of five alert variants, each outlined with a dashed border and a light shadow. Reading top to bottom, the set covers a neutral default, a destructive error state, a green success state, a yellow warning state, and a blue info state. Each alert pairs a status icon on the left with a bold title and a short description beside it, so tone is communicated by both color and iconography at once.

All five alerts are independent. You can keep only the variants your product needs, swap the title and description copy freely, and adjust the icon to match your own icon library. The dashed border weight is the same across every variant, so the set reads as a cohesive family no matter how many you include.

When to use

Reach for this block when you need status feedback that feels provisional or advisory rather than final. On a logistics and delivery platform the dashed outline works well for route change notices, pickup window reminders, or carrier delay warnings where the message is real but not alarming. It reads quieter than a solid border set, making it a good fit for pages where alerts are contextual hints sitting alongside a map or tracking timeline rather than blocking the user with a hard stop.

A natural flow around it on a Components page:

Before

Basic Alerts to show the default solid style before introducing the dashed variant
Badges to label statuses above a section that leads into the alert area

After

Dismissible Alerts if the notices should clear once the user acknowledges them
Cards to wrap the alert stack inside a panel for a more structured layout

What you can display

Any of the five states can carry real operational copy. A few concrete fits for a delivery context:

Route or schedule changes. Use the warning or info variants to surface updated ETAs, rerouted shipments, or pickup window shifts without alarming the recipient.
Confirmation of an action. The success variant fits post-submit moments like a booking confirmed or a label generated.
Validation or system errors. The destructive variant covers failed address lookups, payment declines, or API connectivity issues that need clear but non-modal feedback.

Tip: remove variants your product does not use rather than leaving them with placeholder copy; a focused set of two or three states stays easier to scan.

About this block

When to use

A natural flow around it on a Components page:

Before

Basic Alerts to show the default solid style before introducing the dashed variant
Badges to label statuses above a section that leads into the alert area

After

Dismissible Alerts if the notices should clear once the user acknowledges them
Cards to wrap the alert stack inside a panel for a more structured layout

What you can display

Any of the five states can carry real operational copy. A few concrete fits for a delivery context:

Route or schedule changes. Use the warning or info variants to surface updated ETAs, rerouted shipments, or pickup window shifts without alarming the recipient.
Confirmation of an action. The success variant fits post-submit moments like a booking confirmed or a label generated.
Validation or system errors. The destructive variant covers failed address lookups, payment declines, or API connectivity issues that need clear but non-modal feedback.

Tip: remove variants your product does not use rather than leaving them with placeholder copy; a focused set of two or three states stays easier to scan.

Dashed Border Alerts

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display