# Spotlight Card — React Card Component

> A card whose border and surface light up under the cursor like a torch on glass.

- Category: [Cards](https://pixelpapa.com/components/cards.md)
- Tags: card, hover, spotlight, glow
- Dependencies: lucide-react (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/cards/spotlight-card

## Install

```bash
npx shadcn@latest add "https://pixelpapa.com/r/spotlight-card.json"
```

The file is written to `components/pixelpapa/spotlight-card.tsx`. To install manually, run `npm install lucide-react` and copy the source below into your project. It imports `cn` from `@/lib/utils`, which every shadcn project has.

## Source

```tsx
"use client";

import { Layers, Sparkles, Zap } from "lucide-react";
import { useRef, type ComponentProps, type PointerEvent } from "react";
import { cn } from "@/lib/utils";

type SpotlightCardProps = ComponentProps<"div"> & {
  /** Radius of the light in px. */
  size?: number;
};

export function SpotlightCard({ size = 320, className, children, ...props }: SpotlightCardProps) {
  const ref = useRef<HTMLDivElement>(null);

  function onPointerMove(e: PointerEvent<HTMLDivElement>) {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty("--x", `${e.clientX - r.left}px`);
    el.style.setProperty("--y", `${e.clientY - r.top}px`);
  }

  return (
    <div
      ref={ref}
      onPointerMove={onPointerMove}
      style={{ "--size": `${size}px` } as React.CSSProperties}
      className={cn(
        "group relative rounded-2xl bg-border p-px transition-shadow duration-300 hover:shadow-xl hover:shadow-primary/5",
        className,
      )}
      {...props}
    >
      {/* Border light */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
        style={{
          background:
            "radial-gradient(var(--size) circle at var(--x) var(--y), var(--primary), transparent 60%)",
        }}
      />
      <div className="relative h-full overflow-hidden rounded-[calc(1rem-1px)] bg-card p-6">
        {/* Surface light */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
          style={{
            background:
              "radial-gradient(calc(var(--size) * 1.2) circle at var(--x) var(--y), color-mix(in oklch, var(--primary) 12%, transparent), transparent 60%)",
          }}
        />
        <div className="relative">{children}</div>
      </div>
    </div>
  );
}

const features = [
  { icon: Zap, title: "Instant", body: "Pointer position is written straight to CSS variables. No re-renders." },
  { icon: Layers, title: "Layered", body: "One light on the border, a softer one on the surface underneath." },
  { icon: Sparkles, title: "Themed", body: "The glow uses your primary colour in light and dark mode." },
];

export default function SpotlightCardDemo() {
  return (
    <div className="grid w-full max-w-3xl gap-4 sm:grid-cols-3">
      {features.map(({ icon: Icon, title, body }) => (
        <SpotlightCard key={title}>
          <div className="flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
            <Icon className="size-5" />
          </div>
          <h3 className="mt-5 font-medium text-card-foreground">{title}</h3>
          <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{body}</p>
        </SpotlightCard>
      ))}
    </div>
  );
}
```

## AI prompt

```text
Add the "Spotlight Card" component from PixelPapa UI to this project.

What it is: A card whose border and surface light up under the cursor like a torch on glass.
Category: Cards. Depends on: lucide-react.

1. Install it with the shadcn CLI:
   npx shadcn@latest add "https://pixelpapa.com/r/spotlight-card.json"
   (If the CLI is unavailable, fetch that URL, write files[0].content to components/pixelpapa/spotlight-card.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/spotlight-card" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More cards

- [Card 3D Tilt](https://pixelpapa.com/components/cards/card-3d-tilt.md) (Pro): A card that leans toward the pointer on springs, with a glare that tracks the cursor and layers floating at different depths.
- [Card Border Beam](https://pixelpapa.com/components/cards/card-border-beam.md) (Pro): A card with a comet of light travelling around its border, drawn with an animated conic gradient and a soft glow copy.
- [Card Expandable Detail](https://pixelpapa.com/components/cards/card-expandable-detail.md) (Pro): Compact rows that expand in place with a shared layout animation, pushing their neighbours aside on a spring.
- [Card Flip](https://pixelpapa.com/components/cards/card-flip.md) (Pro): A two-sided card that turns over on a spring when clicked or activated from the keyboard, on either axis.
- [Card Glass Frost](https://pixelpapa.com/components/cards/card-glass-frost.md): A frosted glass card with a lit top edge and fine grain, floating over slowly drifting colour blobs.
- [Card Hover Reveal Actions](https://pixelpapa.com/components/cards/card-hover-reveal-actions.md) (Pro): A media card whose artwork zooms on hover while quick actions spring in from the edge and a call to action rises from the footer.