Tailwind CSS Dialog

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 project.

You can initialize a new dialog by adding the data-dialog-target="{dialog}" data attribute to the trigger element, the data-dialog-backdrop="{dialogName}" to the backdrop element and the
data-dialog="{dialogName}" to the dialog element itself and make sure that the values for those data attributes are the same.

You can also use the data-dialog-close="true" for the element that you want to close the dialog with when clicking.


Its a simple dialog.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad reprehenderit omnis perspiciatis aut odit! Unde architecto perspiciatis, dolorum dolorem iure quia saepe autem accusamus eum praesentium magni corrupti explicabo!

Dialog Sizes

You can set the size of the dialog by your own using the tailwind css classes, check the below examples for more details.

Its a simple dialog.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad reprehenderit omnis perspiciatis aut odit! Unde architecto perspiciatis, dolorum dolorem iure quia saepe autem accusamus eum praesentium magni corrupti explicabo!
Its a simple dialog.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad reprehenderit omnis perspiciatis aut odit! Unde architecto perspiciatis, dolorum dolorem iure quia saepe autem accusamus eum praesentium magni corrupti explicabo!
Its a simple dialog.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad reprehenderit omnis perspiciatis aut odit! Unde architecto perspiciatis, dolorum dolorem iure quia saepe autem accusamus eum praesentium magni corrupti explicabo!
Its a simple dialog.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad reprehenderit omnis perspiciatis aut odit! Unde architecto perspiciatis, dolorum dolorem iure quia saepe autem accusamus eum praesentium magni corrupti explicabo!
Its a simple dialog.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad reprehenderit omnis perspiciatis aut odit! Unde architecto perspiciatis, dolorum dolorem iure quia saepe autem accusamus eum praesentium magni corrupti explicabo!
Its a simple dialog.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad reprehenderit omnis perspiciatis aut odit! Unde architecto perspiciatis, dolorum dolorem iure quia saepe autem accusamus eum praesentium magni corrupti explicabo!

Custom Dialog Animation

You can modify the open/close state animation for dialog by adding the data-dialog-mount="{opacity-100}", data-dialog-unmount="{opacity-0}" and data-dialog-transition="{transition-opacity}" data attributes to the dialog element. You can pass tailwind css classnames for those data attributes for animating the dialog.
Check more about animation data attributes for dialog here.

Its a simple dialog.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus ad reprehenderit omnis perspiciatis aut odit! Unde architecto perspiciatis, dolorum dolorem iure quia saepe autem accusamus eum praesentium magni corrupti explicabo!

Dialog with Form

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

Sign In

Don't have an account?Sign up


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.

Connect a Wallet

Popular

More

New to Ethereum wallets?


Dialog Trigger Data Attributes

The following data attributes are available for dialog trigger element.

AttributeDescription
data-dialog-targetSet the dialog target element, it should be the same as the data-dialog
and data-dialog-backdrop data attributes.
data-dialog-closeIt's an optional data attribute, you can set it for any element and it will turn the element
to a close trigger for dialog when click event happened on that element.

Dialog Backdrop Data Attributes

The following data attributes are available for dialog backdrop element.

AttributeDescription
data-dialog-backdropSet the dialog backdrop element, it should be the same as the data-dialog
and data-dialog-target data attributes.
data-dialog-backdrop-closeSets whether to close dialog when clicking on it's backdrop or not.

Dialog Data Attributes

The following data attributes are available for dialog element.

AttributeDescriptionDefault
data-dialogSet the name of the dialog and reference it to the
dialog trigger and backdrop elements.
data-popover-mountSet the classnaes that should be used when the
dialog is visible.
opacity-1
translate-y-0
data-popover-unmountSet the classnaes that should be used when the
dialog is hidden.
opacity-0
-translate-y-14
pointer-events-none
data-popover-transitionSet the classnaes that should be used for
transition of the dialog.
transition-all
duration-300

Required Scrips

The dialog component needs a required script file to work, you just need to add the below script file to the bottom of your html file.

<!-- from node_modules -->
<script src="node_modules/@material-tailwind/[email protected]/scripts/dialog.js"></script>
 
<!-- from cdn -->
<script src="https://unpkg.com/@material-tailwind/[email protected]/scripts/dialog.js"></script>
Edit this page on Github