Inset Alerts

Alerts with an inset shadow that sinks slightly into the surface. Use for grouped notices inside cards or panels that feel part of the layout.

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

export default function InsetAlerts() {
  return (
    <div className="flex flex-col gap-4 p-6">
      <Alert className="shadow-inner bg-gray-50 dark:bg-gray-900 border-2">
        <AlertTitle>Default Alert</AlertTitle>
        <AlertDescription>
          This alert has an inset shadow to appear pressed into the page.
        </AlertDescription>
      </Alert>

      <Alert
        variant="destructive"
        className="shadow-inner bg-gray-50 dark:bg-gray-900 border-2"
      >
        <XCircle className="h-4 w-4" />
        <AlertTitle>Destructive Alert</AlertTitle>
        <AlertDescription>
          This alert has an inset shadow to appear pressed into the page.
        </AlertDescription>
      </Alert>

      <Alert className="border-green-500/50 text-green-700 dark:border-green-500 dark:text-green-400 [&>svg]:text-green-500 shadow-inner bg-gray-50 dark:bg-gray-900 border-2">
        <CheckCircle className="h-4 w-4" />
        <AlertTitle>Success Alert</AlertTitle>
        <AlertDescription>
          This alert has an inset shadow to appear pressed into the page.
        </AlertDescription>
      </Alert>

      <Alert className="border-yellow-500/50 text-yellow-700 dark:border-yellow-500 dark:text-yellow-400 [&>svg]:text-yellow-500 shadow-inner bg-gray-50 dark:bg-gray-900 border-2">
        <AlertTriangle className="h-4 w-4" />
        <AlertTitle>Warning Alert</AlertTitle>
        <AlertDescription>
          This alert has an inset shadow to appear pressed into the page.
        </AlertDescription>
      </Alert>

      <Alert className="border-blue-500/50 text-blue-700 dark:border-blue-500 dark:text-blue-400 [&>svg]:text-blue-500 shadow-inner bg-gray-50 dark:bg-gray-900 border-2">
        <AlertCircle className="h-4 w-4" />
        <AlertTitle>Info Alert</AlertTitle>
        <AlertDescription>
          This alert has an inset shadow to appear pressed into the page.
        </AlertDescription>
      </Alert>
    </div>
  );
}

About this block

Inset Alerts is a vertical stack of five alert variants, each sharing the same pressed-in treatment. Every alert carries a title and a short description. Four of the five add a status icon at the leading edge: a red X circle for the destructive variant, a green check circle for success, a yellow triangle for warning, and a blue info circle for the informational variant. The default alert has no icon. The inset shadow on each panel creates a recessed look so the notices appear sunken into the surface rather than raised above it.

Each alert is independent. You can keep any subset of the five, rewrite the title and description copy, or swap in a different icon without affecting the others. The five tones cover the common status vocabulary, so most use cases only need copy changes.

When to use

Reach for this block when alerts live inside a card, sidebar panel, or settings section and need to feel like part of the surface rather than floating on top of it. On an online education platform the pressed look fits naturally inside a course detail card, a quiz results panel, or an assignment submission area where the notices belong to the content around them rather than interrupting it. The inset style is quieter than elevated or outlined alerts, so it is a good fit when several notices share a panel and you want them to feel cohesive rather than stacked and competing.

A natural flow around it on a Components page:

Before

Basic Alerts to establish the simplest alert treatment before introducing the inset variant
Cards when the parent container is a card that these alerts will sit inside

After

Compact Alerts for a slimmer alternative when vertical space runs tight
Dismissible Alerts if readers should be able to clear notices once they have been seen

What you can display

All five tones are ready to use as-is. A few ways to put them to work:

Course status notices. Show a success alert when a lesson is marked complete, a warning when a deadline is approaching, and an info alert when new course material has been added.
Form validation feedback. Place the destructive variant below a field group to surface submission errors, and swap to success once the data passes.
Panel-level system messages. Use the default or info variant inside a settings panel to surface read-only notices such as billing cycle reminders or account tier limits.

Tip: because the inset shadow reads as part of the surface, these alerts pair especially well with a lightly tinted panel background.

About this block

When to use

A natural flow around it on a Components page:

Before

Basic Alerts to establish the simplest alert treatment before introducing the inset variant
Cards when the parent container is a card that these alerts will sit inside

After

Compact Alerts for a slimmer alternative when vertical space runs tight
Dismissible Alerts if readers should be able to clear notices once they have been seen

What you can display

All five tones are ready to use as-is. A few ways to put them to work:

Course status notices. Show a success alert when a lesson is marked complete, a warning when a deadline is approaching, and an info alert when new course material has been added.
Form validation feedback. Place the destructive variant below a field group to surface submission errors, and swap to success once the data passes.
Panel-level system messages. Use the default or info variant inside a settings panel to surface read-only notices such as billing cycle reminders or account tier limits.

Tip: because the inset shadow reads as part of the surface, these alerts pair especially well with a lightly tinted panel background.

Inset 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