Side-mounted temporary panel.
Orders ship within two working days from our Bristol warehouse.
Email updates, SMS reminders and calendar invites for this order.
<div class="sheet-demo">
<div class="sheet-demo__scrim"></div>
<div class="sheet-panel sheet-panel--right" style="width:300px;border-color:#D9C8F0;" role="dialog" aria-modal="true" aria-labelledby="sheet-title">
<div class="sheet-panel__head">
<h3 class="sheet-panel__title" id="sheet-title">Delivery details</h3>
<button type="button" class="sheet-panel__close" aria-label="Close">
<svg width="13" height="13" viewBox="0 0 12 12" aria-hidden="true"><path d="M1 1l10 10M11 1L1 11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
</button>
</div>
<section class="sheet-panel__section">
<h4>Details</h4>
<p>Orders ship within two working days from our Bristol warehouse.</p>
</section>
<section class="sheet-panel__section">
<h4>Preferences</h4>
<p>Email updates, SMS reminders and calendar invites for this order.</p>
</section>
<div class="sheet-panel__actions">
<button type="button" class="sheet-panel__btn sheet-panel__btn--ghost">Cancel</button>
<button type="button" class="sheet-panel__btn sheet-panel__btn--solid" style="background:#D9C8F0;border-color:#D9C8F0;">Save</button>
</div>
</div>
</div>
<style>
.sheet-demo { position: relative; min-height: 340px; overflow: hidden; border-radius: 12px; background: #FAF7F2; box-sizing: border-box; }
.sheet-demo__scrim { position: absolute; inset: 0; background: rgba(36,20,48,.45); }
.sheet-panel { position: absolute; top: 0; bottom: 0; background: #FAF7F2; color: #241430; box-shadow: 0 20px 44px rgba(36,20,48,.28); padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; font: 16px/1.5 system-ui, sans-serif; }
.sheet-panel--right { right: 0; border-left: 5px solid; }
.sheet-panel--left { left: 0; border-right: 5px solid; }
.sheet-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sheet-panel__title { margin: 0; font-size: 17px; font-weight: 600; }
.sheet-panel__close { border: none; background: transparent; cursor: pointer; color: #241430; padding: 4px; border-radius: 6px; }
.sheet-panel__close:focus-visible { outline: 2px solid #241430; outline-offset: 1px; }
.sheet-panel__section { margin-bottom: 16px; }
.sheet-panel__section h4 { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #24143099; }
.sheet-panel__section p { margin: 0; font-size: 14px; color: #241430cc; }
.sheet-panel__actions { margin-top: auto; display: flex; justify-content: flex-end; gap: 10px; }
.sheet-panel__btn { font: 500 14px system-ui, sans-serif; padding: 9px 16px; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer; }
.sheet-panel__btn--ghost { background: transparent; border-color: #24143033; color: #241430; }
.sheet-panel__btn--solid { color: #241430; }
</style><div class="relative min-h-[340px] overflow-hidden rounded-xl bg-[#FAF7F2] box-border">
<div class="absolute inset-0 bg-[#241430]/45"></div>
<div class="sheet-tw-panel sheet-tw-panel--right absolute top-0 bottom-0 bg-[#FAF7F2] text-[#241430] shadow-2xl p-5 box-border flex flex-col font-sans" style="width:300px;border-color:#D9C8F0;" role="dialog" aria-modal="true" aria-labelledby="sheet-tw-title">
<div class="flex items-start justify-between gap-3 mb-3.5">
<h3 id="sheet-tw-title" class="m-0 text-[17px] font-semibold">Delivery details</h3>
<button type="button" aria-label="Close" class="border-0 bg-transparent cursor-pointer p-1 rounded-md text-[#241430]">
<svg width="13" height="13" viewBox="0 0 12 12" aria-hidden="true"><path d="M1 1l10 10M11 1L1 11" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>
</button>
</div>
<section class="mb-4">
<h4 class="m-0 mb-1 text-xs uppercase tracking-wide text-[#24143099]">Details</h4>
<p class="m-0 text-sm text-[#241430]/80">Orders ship within two working days from our Bristol warehouse.</p>
</section>
<section class="mb-4">
<h4 class="m-0 mb-1 text-xs uppercase tracking-wide text-[#24143099]">Preferences</h4>
<p class="m-0 text-sm text-[#241430]/80">Email updates, SMS reminders and calendar invites for this order.</p>
</section>
<div class="mt-auto flex justify-end gap-2.5">
<button type="button" class="px-4 py-2 rounded-lg text-sm font-medium border border-[#24143033]">Cancel</button>
<button type="button" class="px-4 py-2 rounded-lg text-sm font-medium" style="background:#D9C8F0;border-color:#D9C8F0;">Save</button>
</div>
</div>
</div>
<style>
.sheet-tw-panel--right { right: 0; border-left: 5px solid; }
.sheet-tw-panel--left { left: 0; border-right: 5px solid; }
</style>export function SideSheet({
title = "Delivery details",
body = "Orders ship within two working days from our Bristol warehouse.",
side = "right",
width = 300,
accent = "#D9C8F0",
backdrop = true,
}) {
const sideStyle = side === "left"
? { left: 0, borderRight: `5px solid ${accent}` }
: { right: 0, borderLeft: `5px solid ${accent}` };
return (
<div style={{ position: "relative", minHeight: 340, overflow: "hidden", borderRadius: 12, background: "#FAF7F2", boxSizing: "border-box" }}>
{backdrop && <div style={{ position: "absolute", inset: 0, background: "rgba(36,20,48,.45)" }} />}
<div role="dialog" aria-modal="true" aria-labelledby="sheet-title" style={{ position: "absolute", top: 0, bottom: 0,
width, background: "#FAF7F2", color: "#241430", boxShadow: "0 20px 44px rgba(36,20,48,.28)", padding: 20,
boxSizing: "border-box", display: "flex", flexDirection: "column", fontFamily: "system-ui, sans-serif", ...sideStyle }}>
<div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12, marginBottom: 14 }}>
<h3 id="sheet-title" style={{ margin: 0, fontSize: 17, fontWeight: 600 }}>{title}</h3>
<button type="button" aria-label="Close" style={{ border: "none", background: "transparent", cursor: "pointer",
color: "#241430", padding: 4, borderRadius: 6 }}>
<svg width="13" height="13" viewBox="0 0 12 12" aria-hidden="true"><path d="M1 1l10 10M11 1L1 11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
</button>
</div>
<section style={{ marginBottom: 16 }}>
<h4 style={{ margin: "0 0 4px", fontSize: 12, textTransform: "uppercase", letterSpacing: ".04em", color: "#24143099" }}>Details</h4>
<p style={{ margin: 0, fontSize: 14, color: "#241430cc" }}>{body}</p>
</section>
<section style={{ marginBottom: 16 }}>
<h4 style={{ margin: "0 0 4px", fontSize: 12, textTransform: "uppercase", letterSpacing: ".04em", color: "#24143099" }}>Preferences</h4>
<p style={{ margin: 0, fontSize: 14, color: "#241430cc" }}>Email updates, SMS reminders and calendar invites for this order.</p>
</section>
<div style={{ marginTop: "auto", display: "flex", justifyContent: "flex-end", gap: 10 }}>
<button type="button">Cancel</button>
<button type="button" style={{ background: accent, borderColor: accent, color: "#241430" }}>Save</button>
</div>
</div>
</div>
);
}