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.

nature

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