Tailwind CSS Dialog - React

Use our Tailwind CSS Dialog component to inform users about a task or important information that require decisions, or involves multiple tasks.

A Dialog is a type of modal window with critical information which disable all app functionality when they appear and remains on screen until confirmed/dismissed.

See below our Dialog example that you can use for your Tailwind CSS and React project.

Dialog Sizes

The Dialog component comes with 6 different sizes that you can change it using the size prop.

Custom Dialog Animation

You can modify the open/close state animation for Dialog component using the animate prop.

Dialog with Form

Use the example below to create a dialog with a sign in form.

Dialog with Image

Use the example below to create a dialog with an image inside, similar to unsplash.


Web 3.0 Dialog

Use the example below to create a Web 3.0 wallet connect dialog.

Long Dialog

Message Dialog

Notification Dialog

Edit this page on Github