Modal

Home Components Modal

Default Modal

Basic modal with header, body, and footer

Modal Title

This is the modal body content. You can put any HTML content here including text, images, forms, and more.

Static Backdrop

Modal that won't close on backdrop click

Static Backdrop

I will not close if you click outside me. Try clicking outside or pressing the escape key.

Modal Sizes

Size Variations

Small, default, large, and extra-large modals

Small Modal

This is a small modal. Width: 300px

Default Modal

This is a default sized modal. Width: 500px

Large Modal

This is a large modal. Width: 800px

Extra Large Modal

This is an extra large modal. Width: 1140px

Fullscreen Modal

This is a fullscreen modal that takes up the entire viewport.

Position & Scrolling

Vertically Centered

Modal centered in the viewport

Centered Modal

This modal is vertically centered in the viewport.

Scrollable Modal

Modal with scrollable body content

Scrollable Modal

This is some long content that will cause the modal body to scroll.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Real-World Examples

Confirmation Dialog

Delete confirmation modal

Delete Item?

Are you sure you want to delete this item? This action cannot be undone.

Form Modal

Modal with form inputs

Add New Item

Name

Success Modal

Confirmation success message

Success!

Your changes have been saved successfully.

Image Preview

Lightbox-style image modal

Login Modal

Authentication dialog

Welcome Back

Email address

Password Forgot password?

Remember me

Don't have an account? Sign up

About Privacy Policy Terms of Service Contact