Dialog · Sheet
A modal on a native <dialog> (focus trap and Escape come free). The panel arrives out of a blur on a pop spring.
Code
1. Install
npm i framer-motion lucide-react
2. Files
"use client";
// Dialog: a modal on a native <dialog> (focus trap and Escape come free). The panel arrives out of a blur on a pop
// spring. Controlled: render it with `open` and handle `onClose`.
import { useEffect, useId, useRef, type CSSProperties, type ReactNode } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { X } from "lucide-react";
export type DialogCue = "unfold" | "fold";
export type DialogProps = {
/** Whether the dialog is showing. */
open?: boolean;
/** Called when the user asks to close: Escape, the backdrop or the close button. */
onClose?: () => void;
/** Heading. */
title?: ReactNode;
/** Muted line under the heading. */
description?: ReactNode;
/** Body content. */
children?: ReactNode;
/** Buttons row at the bottom, right-aligned. */
footer?: ReactNode;
/** Panel width: small 360px, medium 440px, large 640px. */
size?: "sm" | "md" | "lg";
/** Accessible name of the close button. */
closeLabel?: string;
/** Sound hook: "unfold" on open, "fold" on close. */
onSound?: (cue: DialogCue) => void;
className?: string;
style?: CSSProperties;
};
const EXIT = [0.4, 0, 1, 1] as const;
const EASE = [0.22, 1, 0.36, 1] as const;
const POP = { type: "spring", stiffness: 500, damping: 18, mass: 0.9 } as const;
export function Dialog({ open = false, onClose, title, description, children, footer, size = "md", closeLabel = "Close", onSound, className, style }: DialogProps) {
const ref = useRef<HTMLDialogElement>(null);
const tid = useId();
const was = useRef(false);
const snd = useRef(onSound);
snd.current = onSound;
useEffect(() => {
const d = ref.current;
if (!d) return;
if (open && !d.open) {
d.showModal();
snd.current?.("unfold");
}
if (!open && d.open && was.current) {
snd.current?.("fold");
// let the exit animation play, then close the native dialog
const t = setTimeout(() => d.open && d.close(), 220);
return () => clearTimeout(t);
}
was.current = open;
}, [open]);
return (
<dialog ref={ref} className="dlg-root" aria-labelledby={title ? tid : undefined} onCancel={(e) => {
e.preventDefault();
onClose?.();
}} onClick={(e) => e.target === ref.current && onClose?.()}>
<AnimatePresence>
{open && (
<>
<motion.div key="bg" className="dlg-bg" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0, transition: { duration: 0.16, ease: EXIT } }} transition={{ duration: 0.22, ease: EASE }} onClick={onClose} />
<motion.div
key="panel"
role="document"
className={className ? `dlg-panel ${className}` : "dlg-panel"}
data-size={size}
style={style}
initial={{ opacity: 0, scale: 0.94, y: 10, filter: "blur(6px)" }}
animate={{ opacity: 1, scale: 1, y: 0, filter: "blur(0px)", transitionEnd: { filter: "none" } }}
exit={{ opacity: 0, scale: 0.96, y: 6, filter: "blur(4px)", transition: { duration: 0.16, ease: EXIT } }}
transition={{ ...POP, opacity: { duration: 0.18 }, filter: { duration: 0.22 } }}
>
{(title || description) && (
<div className="dlg-head">
<div>
{title && <h2 id={tid} className="dlg-title">{title}</h2>}
{description && <p className="dlg-desc">{description}</p>}
</div>
<button type="button" className="dlg-x" aria-label={closeLabel} onClick={onClose}>
<X />
</button>
</div>
)}
{children && <div className="dlg-body">{children}</div>}
{footer && <div className="dlg-foot">{footer}</div>}
</motion.div>
</>
)}
</AnimatePresence>
</dialog>
);
}
/* Dialog. Prefix dlg-. */
.dlg-root,
.dlg-root * {
box-sizing: border-box;
}
:where(.dlg-root) button {
font: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
margin: 0;
}
.dlg-root {
--dlg-ease: cubic-bezier(0.22, 1, 0.36, 1);
--dlg-scrim: rgba(var(--ts-fg-rgb), 0.35);
--dlg-panel: var(--ts-raised);
position: fixed;
inset: 0;
width: 100vw;
height: 100dvh;
max-width: none;
max-height: none;
margin: 0;
padding: 20px;
border: 0;
background: transparent;
display: none;
place-items: center;
color: var(--ts-fg);
font-family: var(--ts-font, system-ui, sans-serif);
}
[data-theme="dark"] .dlg-root {
--dlg-scrim: rgba(0, 0, 0, 0.6);
--dlg-panel: var(--ts-tint-2);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .dlg-root {
--dlg-scrim: rgba(0, 0, 0, 0.6);
--dlg-panel: var(--ts-tint-2);
}
}
.dlg-root[open] {
display: grid;
}
.dlg-root::backdrop {
background: transparent;
}
.dlg-bg {
position: fixed;
inset: 0;
background: var(--dlg-scrim);
backdrop-filter: blur(2px);
}
.dlg-panel {
position: relative;
width: 100%;
max-width: 440px;
max-height: calc(100dvh - 40px);
display: flex;
flex-direction: column;
border-radius: var(--ts-r-panel);
background: var(--dlg-panel);
box-shadow: var(--ts-edge);
overflow: hidden;
}
.dlg-panel[data-size="sm"] {
max-width: 360px;
}
.dlg-panel[data-size="lg"] {
max-width: 640px;
}
.dlg-head {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 20px 16px 0 20px;
}
.dlg-head > div {
flex: 1;
min-width: 0;
}
.dlg-title {
margin: 0;
font-size: 17px;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.3;
}
.dlg-desc {
margin: 4px 0 0;
font-size: 14px;
color: var(--ts-fg-muted);
line-height: 1.5;
}
.dlg-x {
flex: none;
width: 32px;
height: 32px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: color-mix(in srgb, var(--ts-fg) 75%, var(--ts-raised));
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: scale 0.22s var(--dlg-ease), background 0.16s var(--dlg-ease), color 0.16s var(--dlg-ease);
}
.dlg-x svg {
width: 16px;
height: 16px;
}
.dlg-x:hover {
background: rgba(var(--ts-fg-rgb), 0.06);
color: var(--ts-fg);
}
.dlg-x:active {
scale: 0.96;
}
.dlg-x:focus-visible {
outline: 0;
box-shadow: 0 0 0 2px var(--ts-page), 0 0 0 4px var(--ts-accent);
}
.dlg-body {
padding: 16px 20px;
overflow: auto;
font-size: 14px;
color: var(--ts-fg-secondary);
line-height: 1.55;
}
.dlg-foot {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 0 20px 20px;
}
/*
* Teseria tokens — the only colours, fonts and corner radii a block reads.
*
* Every name sits under --ts- so it never collides with your app's own variables. Include this file once, or point
* the names at your theme (e.g. --ts-accent: var(--brand)). Light by default; dark follows [data-theme="dark"] on
* any ancestor, or the OS setting unless [data-theme="light"] is set.
*
* Surfaces page → raised (cards, popovers) · sunken (wells, tracks) · tint-1..3 (neutral fills, light to deep)
* Text fg → secondary → tertiary → muted → faint · fg-inverse sits on an fg-coloured fill
* Lines border · edge (the box-shadow a filled surface uses instead of an outline: soft in light, nothing in
* dark; composes with other shadows)
* Signals accent · focus · success · warning · danger
* Corners controls are always pills · r-panel (dialogs, sheets, cards) · r-pop (menus, popovers, toasts) · r-inner
* (thumbnails, inner cards); a row inside a panel uses the panel radius minus the panel padding
*/
:root {
--ts-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--ts-r-panel: 24px;
--ts-r-pop: 18px;
--ts-r-inner: 12px;
--ts-page: #ffffff;
--ts-raised: #ffffff;
--ts-sunken: #f3f2f0;
--ts-tint-1: #f5f4f2;
--ts-tint-2: #ecebe8;
--ts-tint-3: #e3e1dd;
--ts-fg: #161514;
--ts-fg-rgb: 22, 21, 20;
--ts-fg-secondary: #3a3836;
--ts-fg-tertiary: #585552;
--ts-fg-muted: #6d6a66;
--ts-fg-faint: #89857f;
--ts-fg-inverse: #ffffff;
--ts-border: rgba(22, 21, 20, 0.1);
--ts-edge: 0 0 0 1px rgba(22, 21, 20, 0.07), 0 1px 2px rgba(22, 21, 20, 0.05);
--ts-accent: #3446eb;
--ts-focus: #3446eb;
--ts-success: #13804a;
--ts-warning: #a9650b;
--ts-danger: #df474e;
}
:root[data-theme="dark"] {
--ts-page: #0b0a09;
--ts-raised: #24221f;
--ts-sunken: #0d0c0b;
--ts-tint-1: #131211;
--ts-tint-2: #1b1a18;
--ts-tint-3: #2b2926;
--ts-fg: #f6f5f3;
--ts-fg-rgb: 246, 245, 243;
--ts-fg-secondary: #bab8b4;
--ts-fg-tertiary: #9e9b97;
--ts-fg-muted: #8e8b86;
--ts-fg-faint: #72706c;
--ts-fg-inverse: #0b0a09;
--ts-border: rgba(246, 245, 243, 0.1);
--ts-edge: 0 0 #0000;
--ts-accent: #3446eb;
--ts-focus: #7f8cff;
--ts-success: #3ccf80;
--ts-warning: #efa130;
--ts-danger: #df474e;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ts-page: #0b0a09;
--ts-raised: #24221f;
--ts-sunken: #0d0c0b;
--ts-tint-1: #131211;
--ts-tint-2: #1b1a18;
--ts-tint-3: #2b2926;
--ts-fg: #f6f5f3;
--ts-fg-rgb: 246, 245, 243;
--ts-fg-secondary: #bab8b4;
--ts-fg-tertiary: #9e9b97;
--ts-fg-muted: #8e8b86;
--ts-fg-faint: #72706c;
--ts-fg-inverse: #0b0a09;
--ts-border: rgba(246, 245, 243, 0.1);
--ts-edge: 0 0 #0000;
--ts-accent: #3446eb;
--ts-focus: #7f8cff;
--ts-success: #3ccf80;
--ts-warning: #efa130;
--ts-danger: #df474e;
}
}
3. Usage
import { Dialog } from "./Dialog";
import "./Dialog.css";
export default function Demo() {
return <Dialog />;
}