Spotlight

Card wrapper with a dual-layer radial spotlight that tracks the cursor. Drop-in replacement for GlowCard with a tighter, more intense beam.

Spotlight Card

Move your cursor over this card to see the spotlight effect.

Purple Spotlight

Configurable spotlight color.

Installation

Run the CLI

$npx particleui-cli add spotlight

Usage

TSX

import { Spotlight } from "@/components/ui/spotlight"

export default function Example() {
  return (
    <Spotlight className="w-64 p-6">
      <h3 className="font-semibold">Hover me</h3>
      <p className="text-sm text-muted-foreground mt-1">Cursor-tracked spotlight.</p>
    </Spotlight>
  )
}

Props

Prop	Type	Default	Required
color	string	`"oklch(78% 0.17 200)"`	no
size	number	`400`	no

Details

Source filecomponents/ui/spotlight.tsx

Typeui

Categoriescards, particles

npm dependencies

Registry deps

Claude skill—