Spotlight Card

A quiet spotlight that follows your curiosity.

ReactTypeScriptv1.0.1Pointer interactionResponsive

Styling: inline CSS
Delivery: Reusable React component
License: MIT · Commercial use allowed ↗

Download v1.0.1

Add it to your project

pnpm dlx shadcn@latest add "https://designmyui.dev/r/spotlight-card?version=1.0.1"

Uses React and inline CSS. No additional runtime libraries. Installation guide ↗

♡ Save to favorites

Free source is public. Sign in to keep this version in your library.

Source & usage

The source below is checked against this release’s published SHA-256 hash before delivery. Copy the file or use the registry.

/**
 * Copyright (c) 2026 DesignMyUI
 * SPDX-License-Identifier: MIT
 */
"use client";
import { useRef } from "react";
import type { ReactNode } from "react";
export function SpotlightCard({
  children = (
    <>
      <div style={{ fontSize: 30, marginBottom: 18 }}>✧</div>
      <h3 style={{ fontSize: 16, fontWeight: 600, margin: 0 }}>
        A little less ordinary.
      </h3>
      <p style={{ fontSize: 12, color: "#75697f", margin: "8px 0 0" }}>
        Thoughtful details make a difference.
      </p>
    </>
  ),
}: {
  children?: ReactNode;
}) {
  const ref = useRef<HTMLDivElement>(null);
  return (
    <div
      ref={ref}
      onPointerMove={(e) => {
        const box = e.currentTarget.getBoundingClientRect();
        e.currentTarget.style.setProperty("--x", `${e.clientX - box.left}px`);
        e.currentTarget.style.setProperty("--y", `${e.clientY - box.top}px`);
      }}
      style={{
        position: "relative",
        overflow: "hidden",
        maxWidth: 275,
        width: "100%",
        padding: 26,
        borderRadius: 18,
        border: "1px solid #e9e1f0",
        background:
          "radial-gradient(180px circle at var(--x, 50%) var(--y, 35%), #e6d5fa90, transparent),#fcfaff",
        boxShadow: "0 10px 25px #47365f08",
        color: "#40374e",
        textAlign: "left",
      }}
    >
      {children}
    </div>
  );
}

Use it in your interface

Interactive handlers belong in a React client component. Replace the content and props with your own.

import { SpotlightCard } from "./spotlight-card";

<SpotlightCard>Your content</SpotlightCard>

Published versions

Each download keeps its original source. Choose a release to inspect and download that exact version.

v1.0.1 · Current release

Published source aligned with the DesignMyUI interface foundation.

Published Oct 11, 2026

v1.0.0

Initial published source.