Recipe

Modal dialog patterns

Accessible overlay dialogs built with native HTML and Tailwind — no third-party libraries.

Basic modal

Confirm action

ESC

Are you sure you want to proceed? This action cannot be undone.

CancelConfirm

Sheet variant

Filter results

Narrow down by category, date range, or status.

Category
Date range
Status
Apply filters

Implementation notes

  • 1Use a fixed backdrop with bg-black/60 and center the dialog with flex.
  • 2Trap focus inside the modal and close on Escape keypress.
  • 3Animate entrance with opacity and scale transitions; keep duration under 200ms.
  • 4Sheet variant slides up from the bottom — ideal for mobile filters and action sheets.
Back to docs