Component

Spotlight Card

A frosted-glass card with a radial glow that follows the cursor and an optional pointer-aware border sheen. The glow is driven by CSS custom properties, so tracking the mouse never re-renders React.

Move your cursor

The glow tracks your pointer through CSS variables — no re-renders, just smooth compositor work.

Installation

Registry CLI — copy the source straight into your project:

$pnpm dlx shadcn@latest add @stacklyui/spotlight-card

Or install the package and import it:

$pnpm add @stacklyui/ui motion

Usage

Content goes in as children and renders inside a padded content layer above the glow. Set glow to any CSS color and radius to size the spotlight. Turn off the animated border with border={false}.

Props

Prop	Type	Default	Description
`radius`	`number`	`350`	Radius of the spotlight glow in pixels.
`glow`	`string`	`accent`	CSS color of the glow. Defaults to the accent token.
`border`	`boolean`	`true`	Show the pointer-tracked animated border.
`className`	`string`	—	Classes applied to the card element.