Dotted Border Alerts

Alerts wrapped in a dotted border for a soft, playful outline. Use for casual reminders, tips, or low priority notes in friendly interfaces.

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

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

      <Alert variant="destructive" className="border-dotted border-2 shadow-sm">
        <XCircle className="h-4 w-4" />
        <AlertTitle>Destructive Alert</AlertTitle>
        <AlertDescription>
          This alert has a dotted 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-dotted border-2 shadow-sm">
        <CheckCircle className="h-4 w-4" />
        <AlertTitle>Success Alert</AlertTitle>
        <AlertDescription>
          This alert has a dotted 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-dotted border-2 shadow-sm">
        <AlertTriangle className="h-4 w-4" />
        <AlertTitle>Warning Alert</AlertTitle>
        <AlertDescription>
          This alert has a dotted 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-dotted border-2 shadow-sm">
        <AlertCircle className="h-4 w-4" />
        <AlertTitle>Info Alert</AlertTitle>
        <AlertDescription>
          This alert has a dotted border style.
        </AlertDescription>
      </Alert>
    </div>
  );
}

About this block

Dotted Border Alerts is a set of five stacked alert variants, each wrapped in a dotted outline. The variants cover the full tonal range: a neutral default, a destructive error, a green success, a yellow warning, and a blue info notice. Every alert pairs an icon on the left with a bold title and a short description beside it.

All five alerts share the same dotted frame and soft shadow, so the set reads as a coherent system. The title, description, and icon in each alert are independent, so you can swap copy and icons freely. You can also drop individual variants and use only the tones that fit your product without disturbing the others.

When to use

Reach for this block when your interface calls for feedback messages that feel approachable rather than urgent. An HR and hiring platform is a good fit: candidate status updates, reminder nudges, and onboarding tips all benefit from a tone that is informative without feeling alarming. The dotted outline reads softer than a solid border, making it a better choice than accent-border or all-sides-accent variants when the message is low stakes.

A natural flow around it on a Components page:

Before

Basic Alerts to establish a plain, no-frills baseline before introducing styled border variants
Badges to label the section or status context the alerts sit inside

After

Dashed Border Alerts if you want to show a lighter sketch-like alternative in the same group
Cards to wrap alert sets inside a broader content container

What you can display

Each variant maps to a distinct feedback tone and can carry any short message your product needs. A few common uses:

Candidate status notices. Drop success and info alerts onto a hiring pipeline page to confirm actions like interview scheduling or offer sends.
Onboarding reminders. Use the warning or default alert to surface incomplete profile steps or pending tasks in a friendly, non-blocking way.
Form validation summaries. Place the destructive and warning variants at the top of a form to summarize errors or required fields before submission.

Tip: limit each alert to one or two sentences in the description so the dotted frame stays light and the notice reads at a glance.

About this block

When to use

A natural flow around it on a Components page:

Before

Basic Alerts to establish a plain, no-frills baseline before introducing styled border variants
Badges to label the section or status context the alerts sit inside

After

Dashed Border Alerts if you want to show a lighter sketch-like alternative in the same group
Cards to wrap alert sets inside a broader content container

What you can display

Each variant maps to a distinct feedback tone and can carry any short message your product needs. A few common uses:

Candidate status notices. Drop success and info alerts onto a hiring pipeline page to confirm actions like interview scheduling or offer sends.
Onboarding reminders. Use the warning or default alert to surface incomplete profile steps or pending tasks in a friendly, non-blocking way.
Form validation summaries. Place the destructive and warning variants at the top of a form to summarize errors or required fields before submission.

Tip: limit each alert to one or two sentences in the description so the dotted frame stays light and the notice reads at a glance.

Dotted 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