Spotlight

Cards 40

About

A soft radial light that follows the pointer across a card or surface, with an optional lit edge ring, for highlighting hoverable panels.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Spotlight to your project and fits it to your theme.

Code

How Spotlight is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function SpotlightDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <Spotlight
        asChild
        className="w-80 rounded-xl border bg-card p-6 text-card-foreground shadow-sm"
      >
        <div>
          <h3 className="text-lg font-semibold">Move your cursor here</h3>
          <p className="mt-2 text-sm text-muted-foreground">
            The light follows it, and so does the edge.
          </p>
        </div>
      </Spotlight>
    </div>
  );
}