Spotlight card

Spotlight card

A card that lights up under the pointer, with a brighter rim where the light meets the edge.

Group

Cards

Origin

Inspired · Original (this library)

License

MIT

Added

Oct 18

npx shadcn@latest add @deank/spotlight-card

The registry stays private. Install from the repo with a GitHub token — see the README.

Usage

import { SpotlightCard } from "@/registry/components/spotlight-card/spotlight-card";

<SpotlightCard>Label</SpotlightCard>

Prop	Type	Default	Description
`children?`	`ReactNode`
`radius?`	`number`	`260`	Spotlight radius, px.
`color?`	`string`	`"var(--glow-from)"`	Spotlight color.

Also accepts every prop of HTMLAttributes<HTMLDivElement>.

Feature grids where a pointer-following light adds depth.

Touch-first UIs (no hover).