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.0"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.
'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:'#938b9f',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