Modals & Dialogs

Overview

Overlays interrupt — use them sparingly and correctly. shadcn/ui (on Radix) gives you four primitives with built-in focus trap, Esc to close, scroll lock, and aria-modal. Your job is choosing the right one and handling the edge cases: destructive confirms, forms with unsaved input, and not stacking overlays.

When to use

• A focused task or confirmation needs to block the page.
• Building a side panel for details/filters/quick-edit.
• A <div> overlay is being hand-rolled (you'll miss focus trap + keyboard).

Pick the right primitive