1. Overlays
  2. Modal


Tailwind CSS Modal

A modal dialog displays content that requires user interaction, in a layer above the page.

Requires JS

Basic usage


The default form of a modal dialog.


Slide down animation

The default form of a modal dialog with slide down animation.

Slide up animation

The default form of a modal dialog with slide up animation.


Modals have four optional sizes.

Static backdrop

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

Scrolling behavior

Modal dialogs differ in width, whereas height is determined by the content. Once it reaches a certain threshold, the body content will scroll while the header and footer remain fixed until the bottom of the modal dialog is reached.

The scroll behavior of modals can be configured so that scrolling happens inside the modal body or outside the modal, within the viewport.

In either case, modals prevent the window from being scrolled both natively and programatically. This will prevent browser issues such as scrollIntoView scrolling the window instead of only the closest scroll parent.

Vertically centered

Vertically centered modal examples.

Focus management

Pass the autoFocus prop an element ref to focus on a specific element.

Toggle between modals

Toggle between two separate modals.

Fullscreen Modal

Another override is the option to pop up a modal that covers the user viewport.