Spotlight

Dimmed interface highlighting one element.

html

<div class="sp-wrap" data-position="bottom-right">
  <div class="sp-chrome" aria-hidden="true">
    <div class="sp-chrome__row"></div>
    <div class="sp-chrome__row sp-chrome__row--wide"></div>
    <div class="sp-chrome__row"></div>
  </div>
  <div class="sp-hole" aria-hidden="true"></div>
  <div class="sp-callout" style="--accent:#E8A020;">
    <p class="sp-label">New: Bulk export</p>
    <p class="sp-desc">Select multiple rows and export them all at once.</p>
    <button type="button" class="sp-dismiss">Got it</button>
  </div>
</div>
<style>
.sp-wrap { position: relative; font: 16px/1.5 system-ui, sans-serif; color: #241430; width: 380px; height: 240px; background: #FAF7F2; border-radius: 14px; overflow: hidden; border: 1px solid #24143018; }
.sp-chrome { position: absolute; inset: 0; padding: 18px; }
.sp-chrome__row { height: 14px; border-radius: 6px; background: #24143018; margin-bottom: 10px; }
.sp-chrome__row--wide { height: 60px; }
.sp-hole { position: absolute; width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(36,20,48,.58); background: transparent; }
.sp-wrap[data-position="top-left"] .sp-hole { top: 20px; left: 20px; }
.sp-wrap[data-position="top-right"] .sp-hole { top: 20px; right: 20px; }
.sp-wrap[data-position="bottom-left"] .sp-hole { bottom: 20px; left: 20px; }
.sp-wrap[data-position="bottom-right"] .sp-hole { bottom: 20px; right: 20px; }
.sp-wrap[data-position="center"] .sp-hole { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.sp-callout { position: absolute; width: 190px; background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 10px 26px rgba(36,20,48,.24); z-index: 1; }
.sp-wrap[data-position="top-left"] .sp-callout { top: 82px; left: 20px; }
.sp-wrap[data-position="top-right"] .sp-callout { top: 82px; right: 20px; }
.sp-wrap[data-position="bottom-left"] .sp-callout { bottom: 82px; left: 20px; }
.sp-wrap[data-position="bottom-right"] .sp-callout { bottom: 82px; right: 20px; }
.sp-wrap[data-position="center"] .sp-callout { top: 50%; left: 50%; transform: translate(-50%,44px); }
.sp-label { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.sp-desc { margin: 0 0 10px; font-size: 12px; color: #241430b3; }
.sp-dismiss { background: var(--accent); border: 1.5px solid var(--accent); border-radius: 7px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
</style>

tailwind

<div class="sp-tw-wrap relative font-sans text-[#241430] w-[380px] h-[240px] bg-[#FAF7F2] rounded-2xl overflow-hidden border border-[#24143018]" data-position="bottom-right">
  <div class="absolute inset-0 p-4.5" aria-hidden="true">
    <div class="h-3.5 rounded-md bg-[#24143018] mb-2.5"></div>
    <div class="h-[60px] rounded-md bg-[#24143018] mb-2.5"></div>
    <div class="h-3.5 rounded-md bg-[#24143018] mb-2.5"></div>
  </div>
  <div class="sp-tw-hole absolute w-[52px] h-[52px] rounded-xl shadow-[0_0_0_9999px_rgba(36,20,48,.58)]" aria-hidden="true"></div>
  <div class="sp-tw-callout absolute w-[190px] bg-white rounded-[10px] p-3.5 shadow-[0_10px_26px_rgba(36,20,48,.24)] z-[1]" style="--accent:#E8A020">
    <p class="m-0 mb-1 text-[12.5px] font-bold" style="color:#E8A020">New: Bulk export</p>
    <p class="m-0 mb-2.5 text-xs text-[#241430]/70">Select multiple rows and export them all at once.</p>
    <button type="button" class="rounded-lg px-3 py-1.5 text-xs font-semibold" style="background:#E8A020;border:1.5px solid #E8A020">Got it</button>
  </div>
</div>
<style>
.sp-tw-wrap[data-position="top-left"] .sp-tw-hole { top: 20px; left: 20px; }
.sp-tw-wrap[data-position="top-right"] .sp-tw-hole { top: 20px; right: 20px; }
.sp-tw-wrap[data-position="bottom-left"] .sp-tw-hole { bottom: 20px; left: 20px; }
.sp-tw-wrap[data-position="bottom-right"] .sp-tw-hole { bottom: 20px; right: 20px; }
.sp-tw-wrap[data-position="center"] .sp-tw-hole { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.sp-tw-wrap[data-position="top-left"] .sp-tw-callout { top: 82px; left: 20px; }
.sp-tw-wrap[data-position="top-right"] .sp-tw-callout { top: 82px; right: 20px; }
.sp-tw-wrap[data-position="bottom-left"] .sp-tw-callout { bottom: 82px; left: 20px; }
.sp-tw-wrap[data-position="bottom-right"] .sp-tw-callout { bottom: 82px; right: 20px; }
.sp-tw-wrap[data-position="center"] .sp-tw-callout { top: 50%; left: 50%; transform: translate(-50%,44px); }
</style>

react

export function Spotlight({
  label = "New: Bulk export",
  description = "Select multiple rows and export them all at once.",
  targetPosition = "bottom-right",
  accent = "#E8A020",
  dismissLabel = "Got it",
}) {
  const holePos = {
    "top-left": { top: 20, left: 20 },
    "top-right": { top: 20, right: 20 },
    "bottom-left": { bottom: 20, left: 20 },
    "bottom-right": { bottom: 20, right: 20 },
    center: { top: "50%", left: "50%", transform: "translate(-50%,-50%)" },
  }[targetPosition] ?? {};
  const calloutPos = {
    "top-left": { top: 82, left: 20 },
    "top-right": { top: 82, right: 20 },
    "bottom-left": { bottom: 82, left: 20 },
    "bottom-right": { bottom: 82, right: 20 },
    center: { top: "50%", left: "50%", transform: "translate(-50%,44px)" },
  }[targetPosition] ?? {};
  return (
    <div style={{ position: "relative", fontFamily: "system-ui, sans-serif", color: "#241430", width: 380, height: 240, background: "#FAF7F2", borderRadius: 14, overflow: "hidden", border: "1px solid #24143018" }}>
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, padding: 18 }}>
        <div style={{ height: 14, borderRadius: 6, background: "#24143018", marginBottom: 10 }} />
        <div style={{ height: 60, borderRadius: 6, background: "#24143018", marginBottom: 10 }} />
        <div style={{ height: 14, borderRadius: 6, background: "#24143018", marginBottom: 10 }} />
      </div>
      <div aria-hidden="true" style={{ position: "absolute", width: 52, height: 52, borderRadius: 12, boxShadow: "0 0 0 9999px rgba(36,20,48,.58)", ...holePos }} />
      <div style={{ position: "absolute", width: 190, background: "#fff", borderRadius: 10, padding: "14px 16px", boxShadow: "0 10px 26px rgba(36,20,48,.24)", zIndex: 1, ...calloutPos }}>
        <p style={{ margin: "0 0 4px", fontSize: 12.5, fontWeight: 700, color: accent }}>{label}</p>
        <p style={{ margin: "0 0 10px", fontSize: 12, color: "#241430b3" }}>{description}</p>
        <button type="button" style={{ background: accent, border: "1.5px solid " + accent, borderRadius: 7, padding: "6px 12px", fontSize: 12, fontWeight: 600, cursor: "pointer" }}>{dismissLabel}</button>
      </div>
    </div>
  );
}