Modals & Sheets

Build a destructive confirm dialog using Radix Dialog or a comparable headless primitive. 400px wide, 24px padding, rounded-xl, with a soft backdrop (no harsh black). Title in 17px medium that names the consequence ('Delete project Atlas?'). Below: 14px muted paragraph describing irreversibility. Footer with two buttons - left: ghost 'Cancel' (initial focus); right: destructive solid red 'Delete project'. Focus trap, Esc to dismiss, click outside to dismiss only on non-destructive variants. Honour prefers-reduced-motion (fade only, no scale).

Build a command modal triggered by ⌘K. Centered, 560px wide, rounded-xl with a strong backdrop blur. Top: search input with leading search icon, kbd '⌘K' on the right. Below: grouped results (Recent, Actions, Pages) with mono uppercase group headings. Each result row has a leading icon, label, optional subtitle, trailing kbd shortcut hint. Active row has an accent background. Arrow keys navigate, Enter triggers, Esc closes. Footer strip shows ↵ to select · ↑↓ to navigate · esc to close. Use cmdk library or equivalent.

Build a right-edge sheet drawer. Slides in from the right with a translate-x transition (260ms ease-out), backdrop fades in over the same duration with a 40% black overlay. Width: 480px desktop, 100vw mobile (then becomes bottom sheet with rounded top corners and a drag handle). Sticky header with title in 17px medium and close X button. Body scrolls independently. Sticky footer with ghost 'Cancel' and primary 'Save' aligned right. Focus trap, Esc closes, drag-down dismisses on mobile.

Build a fullscreen modal. The modal covers the viewport with a backdrop blur-xl over the page. Centered inside, a content frame at max-width 960px, max-height 90vh, rounded-2xl, padding 0. Sticky header with title, optional eyebrow, and a close X. Body scrolls inside the frame. Sticky footer at the bottom with ghost Cancel + primary Save. Esc closes; click on backdrop closes. Lock body scroll while open and trap focus.

Build a lightbox image modal. On click of a gallery image, animate the image scaling from its source position to centered full-size (FLIP). Backdrop fades to 80% black. Top-right toolbar: zoom in, zoom out, download, close. Left/right edges show prev/next arrows (and arrow keys cycle). Optional bottom thumbnail strip. Esc closes; clicking outside the image closes. Locks page scroll while open.

Build a video modal. Centered 16:9 player at max-width 960px, rounded-xl, background black. Backdrop blur over the page. On open, autoplay the video unmuted; on close (X or Esc or backdrop click), pause and reset to 0. Player has standard controls (play, mute, scrubber, captions, fullscreen). Lock body scroll while open and trap focus inside the modal.

Build a stacked modal pattern. The modal manager keeps a stack of open modals. Each new modal renders above the previous, with an additional dimming backdrop layer beneath it. Esc pops only the top modal. Focus is trapped within the top-most modal exclusively. Enforce a max stack depth of 2. Additional opens replace the top of the stack. Animate enter/exit with a subtle scale + fade.

Build a product tour using floating-ui (or react-joyride). Each step: a tooltip anchored to a real UI element with a spotlight cutout in the backdrop revealing only that element. Tooltip content: title, body, 'X of Y' counter, Skip button, Back/Next buttons. Tour is keyboard-navigable: → and ← step through, Esc skips. On final step, fire onComplete and store completion in localStorage so it never reappears for that user.

Build a payment modal using Stripe Elements. Modal width 480px, padding 32px. Top: plan summary (name, price, billing period) in a small card. Below: Stripe PaymentElement (the official component that renders card + alternative methods). At the bottom: a single full-width 'Pay $X' button. On submit, call stripe.confirmPayment with return_url set to a /payment/return route. Show inline errors near the field they apply to. While confirming, the button shows a spinner and is disabled.

Build a share modal. Header: 'Share this project'. Body sections: (1) Invite by email. Input with multi-tag entry + role select (Editor/Viewer) + Send. (2) People with access. List of avatars + name + email + per-row role select + remove. (3) Public link. Toggle 'Anyone with the link' + level select (View/Comment/Edit) + 'Copy link' button that shows a check icon for 1.5s after click. Modal width 520px. Esc closes.