Published source aligned with the DesignMyUI interface foundation.
Published Oct 11, 2026Free · MIT license
Spotlight Card
A quiet spotlight that follows your curiosity.
- Styling
- inline CSS
- Delivery
- Reusable React component
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.
Initial published source.
Published Oct 11, 2026