Overlay Blocks

Overlay 01

NEW

Confirmation modal: a featured icon, question-style title and a supporting line in the header, over a tray holding cancel and confirm actions.

Get the Code

Overlay 02

NEW

Destructive confirmation modal: a danger featured icon over the consequences of the action, a type-to-confirm field, and cancel next to a red confirm.

Get the Code

Overlay 03

Form modal: a neutral featured icon and title in the header, name and description fields, a two-card visibility picker, and cancel next to a primary create action.

Get the Code

Overlay 04

Success modal: a centered success featured icon over a title and receipt summary, with full-width primary and secondary actions stacked below.

Get the Code

Overlay 05

Error modal: a centered danger featured icon over a declined-payment title and reassurance line, with full-width retry and stay actions stacked below.

Get the Code

Overlay 06

Feedback modal: an emoji rating row, an optional what-could-be-better field and a follow-up consent checkbox, over a tray with dismiss and send actions.

Get the Code

Overlay 07

Warning modal: an away-tone featured icon beside what revoking a key will break, an acknowledgement checkbox, and keep next to an outlined destructive action.

Get the Code

Overlay 08

Share modal: an invite-by-email field, the people with access and their roles, and a link-access row with a read-only link and a copy button.

Get the Code

Overlay 09

Session timeout modal: a warning featured icon over an inactivity notice, a live countdown, and sign-out next to a stay-signed-in action.

Get the Code

Overlay 10

Cookie consent modal: a short notice in the header, locked essential plus analytics and marketing switches, and save next to accept-all.

Get the Code

Overlay 11

What's new modal: an illustrated header with a floating close button, a release badge, title and summary, three highlight rows, and a changelog link next to the primary action.

Get the Code

Overlay 12

Filter modal: a clear-all link in the header, role and status chip groups, a last-active segmented control, and a live result count next to apply.

Get the Code

Overlay 13

Filters modal: reset and close in the header, a price range slider with value tooltips, category checkboxes, an in-stock switch, and a full-width live result count button.

Get the Code

Overlay 14

Rename modal: a single file-name field with a helper line explaining what stays the same, over cancel and rename actions.

Get the Code

Overlay 15

Cart modal: an item-count badge in the header, a scrolling list of products with price badges, quantity steppers and remove buttons, a subtotal and discount summary, and a full-width checkout total.

Get the Code