Docs

Molecules

AlertDialog

Modal dialog interrupting user flow for critical decisions.

5 examplesOverlay ComponentReact 19 & Next.js 16Tailwind CSS v4
Install
pnpm add @quinkit/ui
Import
import { AlertDialog } from "@quinkit/ui";

Interactive Examples

Live previews · code · themes · viewport · dark mode

Basic Confirmation

Modal requiring explicit user acknowledgment before continuing.

Basic Confirmation rendered preview

Destructive Delete Confirmation

Destructive action styling with cancel and confirm buttons.

Destructive Delete Confirmation rendered preview

Async Loading Action

Disable buttons and show spinner during async operations.

Async Loading Action rendered preview

Typed Text Confirmation

Require typing exact confirmation string for high-risk operations.

Typed Text Confirmation rendered preview

Unsaved Changes Warning

Confirm discarding unsaved form state before page navigation.

Unsaved Changes Warning rendered preview

Overview

AlertDialog is a Radix-powered confirmation dialog for destructive or critical decisions. It uses modal semantics, accessible title/description wiring, and design-system tokens.

Accessibility Details

  • Use AlertDialogTitle and AlertDialogDescription to explain the decision.
  • Use AlertDialogCancel for the safe/escape path.
  • Use AlertDialogAction for the confirming action.
  • Keyboard and modal focus behavior are provided by Radix.

Dark mode and reduced motion

  • Uses semantic popover/background/border tokens.
  • Overlay/content animations include motion-reduce:animate-none.

Accessibility & Keyboard

AlertDialog adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

  • Tab / Shift + Tab — Focuses control and moves between interactive elements.
  • Space / Enter — Triggers action or toggles selection.
  • Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

  • Built with semantic HTML tags and explicit aria-* attributes.
  • Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
  • Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry
npx shadcn@latest add https://quinkit-ui.vercel.app/r/alert-dialog.json