Dialog
Built on the native <dialog> element for focus trapping and Escape, with a blur-and-scale entrance and exit.
- Category: Overlays
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Dialog
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | |
onOpenChange | (open: boolean) => void | — | |
title | ReactNode | — | |
description | ReactNode | — | |
footer | ReactNode | — | |
children | ReactNode | — |
About Dialog
Dialog is built on the native dialog element, so focus trapping, Escape and the top layer come from the browser, with a blur-and-scale entrance and exit on top.
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 Dialog
- Confirmations and destructive actions.
- Forms that need full attention.
- Sign-in and upgrade prompts.
- Media and detail views.
How it works
It calls showModal, so content behind is inert and screen readers treat it as modal. The exit animation runs before close, and the backdrop fades with it.
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 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 title, description live, and the Code tab updates to match, so the snippet you copy already carries your values.
- open (boolean).
- title (ReactNode).
- description (ReactNode).
- footer (ReactNode).
Goes well with Dialog
Dialog is already composed into a ready-made section, so you can see it in context or install the whole block.
- Gallery Masonry: Gallery section
- 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
- 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
- Sheet: An animated React side sheet on the native dialog element that you can fling closed
Install Dialog
npx shadcn@latest add https://charcoalui.com/r/dialog.jsonDialog is free and MIT licensed. The command copies dialog.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
It pairs well with Morph Dialog, a Pro piece: A card that grows into a dialog: the shell, artwork and title morph between the two, then fold back on close.
Frequently asked questions
- How do I install Dialog?
- Run npx shadcn@latest add https://charcoalui.com/r/dialog.json. The shadcn CLI copies dialog.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Dialog free for commercial use?
- Yes. Dialog is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does 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 Dialog?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Dialog's props and source and get_install_command returns the exact command.