Alert Dialog
A confirm dialog that needs an answer: Cancel takes focus first, clicking outside shakes the panel instead of closing it, and async confirms show a spinner.
- Category: React Dialog, Popover and Tooltip Components
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Alert Dialog
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | |
onOpenChange | (open: boolean) => void | — | |
title / description | ReactNode | — | |
confirmLabel / cancelLabel | string | — | |
destructive | boolean | false | |
onConfirm | () => void | Promise<void> | — | |
className | string | — |
About Alert Dialog
Alert Dialog asks before something important happens. Cancel takes focus first, clicking outside shakes the panel instead of closing it, and if your confirm returns a promise the button shows a spinner until it settles.
Alert Dialog is an overlay component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Alert Dialog
- Deleting projects and accounts.
- Discarding unsaved changes.
- Cancelling subscriptions.
- Irreversible bulk actions.
How it works
It uses the native dialog element for the top layer, focus trapping and Escape, with the alertdialog role. A destructive prop styles the confirm button and icon in red.
It traps and returns focus correctly, closes on Escape, and is announced to screen readers with the right dialog or menu role. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Alert Dialog
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change destructive live, and the Code tab updates to match, so the snippet you copy already carries your values.
- open (boolean).
- title / description (ReactNode).
- confirmLabel / cancelLabel (string).
- destructive (boolean, default false).
Goes well with Alert Dialog
These overlays pieces share its tokens and motion language, so they sit together on one page without clashing.
- Tooltip: An animated React tooltip that springs from its trigger, with instant neighbours
- Popover: An animated React popover that scales from its trigger and returns focus on close
- Dialog: An animated React dialog on the native dialog element, with blur and scale transitions
- Drawer: A React bottom sheet drawer you can fling closed, with rubber-banding at the top
- Toast: Animated React toasts that stack, fan out on hover and swipe away
Install Alert Dialog
npx shadcn@latest add https://charcoalui.com/r/alert-dialog.jsonAlert Dialog is free and MIT licensed. The command copies alert-dialog.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
Charcoal UI Pro adds 393 more showpiece components, 112 sections and 100 templates built the same way.
Frequently asked questions
- How do I install Alert Dialog?
- Run npx shadcn@latest add https://charcoalui.com/r/alert-dialog.json. The shadcn CLI copies alert-dialog.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Alert Dialog free for commercial use?
- Yes. Alert Dialog is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Alert Dialog work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Alert Dialog?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Alert Dialog's props and source and get_install_command returns the exact command.