3

Responsive Alert Dialog

A confirmation that adapts to the viewport — a centered Alert Dialog on desktop, a bottom Drawer on mobile, from one shared set of components. Neither can be dismissed by clicking outside — an explicit action is always required.

Last updated August 8, 2026

CreditsModifiedPublished

Copied from shadcn/ui.

  • Not a shadcn/ui component — this composition (switch between Alert Dialog and Drawer by viewport width, behind one shared API) is original to this registry, built on top of this registry's own Alert Dialog and Drawer
  • The mobile Drawer is opened with disablePointerDismissal so an outside tap can't close it either, carrying over Alert Dialog's "must pick an action" behavior — swiping it down still dismisses it, same as a native action sheet
  • ResponsiveAlertDialogMedia re-implements AlertDialogMedia's icon-badge styling directly instead of reusing it, since the original leans on CSS selectors scoped to AlertDialogContent's DOM structure that the drawer doesn't have

Overview

Resize the browser window to see the preview switch between an Alert Dialog and a Drawer.

"use client"
 
import { Button } from "@/components/ui/button"
import {
  ResponsiveAlertDialog,
  ResponsiveAlertDialogAction,
  ResponsiveAlertDialogCancel,
  ResponsiveAlertDialogContent,
  ResponsiveAlertDialogDescription,
  ResponsiveAlertDialogFooter,
  ResponsiveAlertDialogHeader,
  ResponsiveAlertDialogTitle,
  ResponsiveAlertDialogTrigger,
} from "@/components/ui/responsive-alert-dialog"
 
export function ResponsiveAlertDialogDemoExample() {
  return (
    <ResponsiveAlertDialog>
      <ResponsiveAlertDialogTrigger
        render={<Button variant="outline">Delete account</Button>}
      />
      <ResponsiveAlertDialogContent>
        <ResponsiveAlertDialogHeader>
          <ResponsiveAlertDialogTitle>
            Are you absolutely sure?
          </ResponsiveAlertDialogTitle>
          <ResponsiveAlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </ResponsiveAlertDialogDescription>
        </ResponsiveAlertDialogHeader>
        <ResponsiveAlertDialogFooter>
          <ResponsiveAlertDialogCancel>Cancel</ResponsiveAlertDialogCancel>
          <ResponsiveAlertDialogAction variant="destructive">
            Continue
          </ResponsiveAlertDialogAction>
        </ResponsiveAlertDialogFooter>
      </ResponsiveAlertDialogContent>
    </ResponsiveAlertDialog>
  )
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/responsive-alert-dialog.json

Usage

import {
  ResponsiveAlertDialog,
  ResponsiveAlertDialogAction,
  ResponsiveAlertDialogCancel,
  ResponsiveAlertDialogContent,
  ResponsiveAlertDialogDescription,
  ResponsiveAlertDialogFooter,
  ResponsiveAlertDialogHeader,
  ResponsiveAlertDialogTitle,
  ResponsiveAlertDialogTrigger,
} from "@/components/ui/responsive-alert-dialog"
 
export function Example() {
  return (
    <ResponsiveAlertDialog>
      <ResponsiveAlertDialogTrigger render={<Button variant="outline">Delete</Button>} />
      <ResponsiveAlertDialogContent>
        <ResponsiveAlertDialogHeader>
          <ResponsiveAlertDialogTitle>Are you absolutely sure?</ResponsiveAlertDialogTitle>
          <ResponsiveAlertDialogDescription>
            This action cannot be undone.
          </ResponsiveAlertDialogDescription>
        </ResponsiveAlertDialogHeader>
        <ResponsiveAlertDialogFooter>
          <ResponsiveAlertDialogCancel>Cancel</ResponsiveAlertDialogCancel>
          <ResponsiveAlertDialogAction>Continue</ResponsiveAlertDialogAction>
        </ResponsiveAlertDialogFooter>
      </ResponsiveAlertDialogContent>
    </ResponsiveAlertDialog>
  )
}

RTL

"use client"
 
import { Button } from "@/components/ui/button"
import {
  ResponsiveAlertDialog,
  ResponsiveAlertDialogAction,
  ResponsiveAlertDialogCancel,
  ResponsiveAlertDialogContent,
  ResponsiveAlertDialogDescription,
  ResponsiveAlertDialogFooter,
  ResponsiveAlertDialogHeader,
  ResponsiveAlertDialogTitle,
  ResponsiveAlertDialogTrigger,
} from "@/components/ui/responsive-alert-dialog"
 
export function ResponsiveAlertDialogRtlExample() {
  return (
    <ResponsiveAlertDialog>
      <ResponsiveAlertDialogTrigger
        render={<Button variant="outline">حذف حساب</Button>}
      />
      <ResponsiveAlertDialogContent>
        <ResponsiveAlertDialogHeader>
          <ResponsiveAlertDialogTitle>
            کاملاً مطمئن هستید؟
          </ResponsiveAlertDialogTitle>
          <ResponsiveAlertDialogDescription>
            این عمل قابل بازگشت نیست. حساب شما برای همیشه حذف و اطلاعات آن از
            سرورهای ما پاک خواهد شد.
          </ResponsiveAlertDialogDescription>
        </ResponsiveAlertDialogHeader>
        <ResponsiveAlertDialogFooter>
          <ResponsiveAlertDialogCancel>انصراف</ResponsiveAlertDialogCancel>
          <ResponsiveAlertDialogAction variant="destructive">
            ادامه
          </ResponsiveAlertDialogAction>
        </ResponsiveAlertDialogFooter>
      </ResponsiveAlertDialogContent>
    </ResponsiveAlertDialog>
  )
}

API Reference

ResponsiveAlertDialog

Edit this page on GitHub
PreviousRadio GroupNextResponsive Dialog