1. Home
2. Components
3. Overlays

Overlays

Components that block interaction with the rest of the application.

Modals vs Dialog

"Modal" is sometimes used to mean "dialog", but this is incorrect. An element is considered modal if it blocks interaction with the rest of the application. A Dialog, on the other hand, is just one of many types of modals.

Modal Overlay Styling

All modals have an overlay container element that is typically a partially transparent element that covers the rest of the screen behind the modal, and prevents the user from interacting with the elements behind it.

You can find the styles for the overlay in the component-styles.css file:

/* ### Modals ### */
@layer components {
	/* Modal Overlay */
	.modal-overlay {
		@apply fixed inset-0 z-10 flex min-h-full items-center justify-center overflow-y-auto bg-muted-950/25 p-4 text-center backdrop-blur;
		&[data-entering] {
			@apply duration-300 ease-out animate-in fade-in;
		}
		&[data-exiting] {
			@apply duration-200 ease-in animate-out fade-out;
		}
	}

	/* Modal */
	.modal {
		@apply w-full max-w-md overflow-hidden rounded-2xl bg-background p-6 text-left align-middle shadow-xl;
		&[data-entering] {
			@apply duration-300 ease-out animate-in zoom-in-95;
		}
		&[data-exiting] {
			@apply duration-200 ease-in animate-out zoom-out-95;
		}
	}
}

Notice the overlay supports entry and exit animations, exposed as [data-entering] and [data-exiting] DOM attributes that you can target with CSS selectors. Modal components will automatically wait for any exit animations to complete before removing the element from the DOM.