Theme:

Modal

Modals display content in a dialog overlay. They work with the native <dialog> element or can be enhanced with Alpine.js.

Dialog-based Modal

<button class="dui-btn dui-btn-primary" onclick="document.getElementById('my-modal').showModal()">Open modal</button> <dialog id="my-modal" class="dui-modal"> <div class="dui-modal-box"> <h3>Confirm Action</h3> <p>Are you sure you want to delete this project?</p> <div class="dui-modal-action"> <form method="dialog"><button class="dui-btn">Cancel</button></form> <form method="dialog"><button class="dui-btn dui-btn-error">Delete</button></form> </div> </div> <form method="dialog" class="dui-modal-backdrop"><button>close</button></form> </dialog>

Sizes

Add dui-modal-sm, dui-modal-lg, or dui-modal-full to the dialog element.

Alpine.js Enhanced

For more control over open/close state, use Alpine.js with the dui-modal-open class.

<div x-data="{ open: false }"> <button @click="open = true" class="dui-btn dui-btn-primary">Open</button> <div x-show="open" class="dui-modal dui-modal-open" style="background: rgb(0 0 0 / 0.5);"> <div class="dui-modal-box" @click.outside="open = false"> <h3>Modal Title</h3> <p>Modal content here.</p> <div class="dui-modal-action"> <button @click="open = false" class="dui-btn">Close</button> </div> </div> </div> </div>