Modal

Dialog modals in 4 sizes using the native <dialog> element.

← Back to examples

Open modals

Small modal

This is a small modal (max-width: 400px). Ideal for confirmations and simple prompts.

Default modal

This is the default modal size. Suitable for most content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Large modal

This is a large modal (max-width: 900px). Useful for forms or detailed content.

Fullscreen modal

This modal covers the entire viewport. Suitable for immersive experiences, image galleries, or complex workflows.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.