Skip to content
Sign in

Modals and Dialogs for React and Tailwind

A dialog interrupts people, so it has to be worth it. Good ones trap focus properly, close with the escape key and return you to where you were. Long content and small screens are the real tests. Try each one from the keyboard before you decide, then install it as code you own and use it sparingly. Ask whether the page itself could answer first.

Alert dialog
Alert dialog

About modals and dialogs

Modals and dialogs pause the page to ask for something: a confirmation before deleting, a short form, a detail view or a message that can't be missed. They come as centred windows, alert dialogs with two clear choices, full screen sheets on phones and nested steps inside one frame.

Use a modal only when the task really blocks everything else, and keep it short. Focus must move into it on open and return to the trigger on close, Escape and a visible close button should both work, and the page behind must not scroll while it's open.

Frequently asked questions

A dialog is any window that asks for input or shows a message. A modal is a dialog that blocks the rest of the page until it is closed. Most dialogs on the web are modal.

Use the native dialog element with showModal, or a tested primitive such as Radix or Base UI. Either way, trap focus inside, label it with a title, close on Escape and return focus to the button that opened it.

For actions that can't be undone or that cost something, such as deleting data or leaving with unsaved changes. Give it two plainly named buttons and don't close it when someone clicks outside.

Hide overflow on the body while the modal is open and restore it on close, keeping the scrollbar's width so the layout doesn't jump. Dialog primitives usually handle this for you.

For simple information, yes. For forms or anything with unsaved input, no, since a stray click shouldn't throw work away. Escape and the close button should always work.

Fade the backdrop and scale the panel slightly from about ninety five percent, both in under two hundred milliseconds. Keep it mounted until the exit animation finishes, and drop the motion for reduced motion settings.

Use a modal for short tasks that keep people in context. Long forms, anything worth linking to and flows with several steps usually belong on their own page or in a drawer.

Explore more