Spotlight Card

Card with a radial spotlight that follows the mouse cursor across its surface.

npx uniqueui add spotlight-card

Preview

Hover for spotlight

Move your mouse over the card to reveal a tracking spotlight effect.

Custom spotlight

Different color and size for the spotlight effect.

Usage

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

export default function Example() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 p-10 text-white text-left">
      <SpotlightCard>
        <h3 className="text-xl font-bold mb-2">Hover for spotlight</h3>
        <p className="text-neutral-400 text-sm">
          Move your mouse over the card to reveal a tracking spotlight effect.
        </p>
      </SpotlightCard>
      <SpotlightCard spotlightColor="rgba(232, 121, 249, 0.1)" spotlightSize={300}>
        <h3 className="text-xl font-bold mb-2">Custom spotlight</h3>
        <p className="text-neutral-400 text-sm">
          Different color and size for the spotlight effect.
        </p>
      </SpotlightCard>
    </div>
  );
}

Props

Prop	Type	Description
`children`	`React.ReactNode`	Components visible on the card.
`className`	`string`	CSS classes for sizing and styling the card layout.
`spotlightColor`	`string`	The hex/rgba color code used for the center cursor glow.
`spotlightSize`	`number`	Diameter width/height of the gradient spotlight in pixels.