Spotlight Card
Card with a soft light that follows the pointer across its surface and border, with touch and keyboard support.
Follows your pointer
A soft light tracks the cursor across the surface and border. Tap and drag on touch screens.
When to use
Use spotlight cards for groups of related items the user is likely to explore: feature grids, pricing tiers, links to case studies. The light rewards exploration without demanding attention.
Playground
Installation
pnpm dlx shadcn@latest add @cadence/spotlight-cardRequires the @cadence namespace in components.json. See Installation.
Usage
import { SpotlightCard } from "@/components/ui/spotlight-card"
export function Feature() {
return (
<SpotlightCard className="p-6">
<h3 className="font-medium">Instant previews</h3>
<p className="text-sm text-muted-foreground">Every pull request gets its own URL.</p>
</SpotlightCard>
)
}By default the light is a soft tint of your foreground color, so it fits any theme. Pass color
to use an accent, for example color="color-mix(in oklch, var(--brand) 20%, transparent)".
Props
Prop
Type
Also accepts all props of ComponentProps<"div">.
Examples
Feature grid with an accent color
Interactive
Responds to mouse, touch and keyboard focus.
Lightweight
CSS variables only, no animation loop.
Themeable
Pick any spotlight color or keep the neutral default.
Composable
Put anything inside: links, buttons, media.
Accessibility
- The light and the border highlight are decorative and hidden from assistive technology.
- When something inside the card receives keyboard focus, the card lights up as well, so keyboard users get the same feedback as mouse users.
- On touch screens the light appears under the finger while it is down, instead of sticking after a tap.
Performance
- Pointer movement only updates two CSS variables on the card. There is no animation loop and React does not re-render while the pointer moves.
- The fade in and out is a short opacity transition, disabled for reduced motion.