Docs/Spotlight Card

Spotlight Card

Interactive spotlight card with cursor tracking effects, tilt animations, and gradient highlights. Free React component by Harsh Jadhav.

Installation

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

Usage

API Reference

PropTypeDefault
spotlightColorColor of the spotlight effect.
stringrgba(120, 119, 198, 0.3)
glowIntensityIntensity of the glow effect (0-1).
number0.15
borderRadiusBorder radius in pixels.
number16
maxTiltMaximum tilt angle in degrees (for TiltSpotlightCard).
number10
borderColorCustom border color.
string—
borderWidthWidth of the border in pixels.
number1

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv

Spotlight Effect

Hover over this card to see the spotlight follow your cursor

This card features an animated gradient border and a soft spotlight glow that tracks your mouse movement.

import {
  SpotlightCard,
  SpotlightCardContent,
  SpotlightCardHeader,
  SpotlightCardTitle,
  SpotlightCardDescription,
} from "@/components/ui/spotlight-card"

<SpotlightCard className="w-96">
  <SpotlightCardHeader>
    <SpotlightCardTitle>Spotlight Effect</SpotlightCardTitle>
    <SpotlightCardDescription>
      Hover over this card to see the spotlight follow your cursor
    </SpotlightCardDescription>
  </SpotlightCardHeader>
  <SpotlightCardContent>
    <p className="text-neutral-300 text-sm">
      This card features an animated gradient border and a soft
      spotlight glow that tracks your mouse movement.
    </p>
  </SpotlightCardContent>
</SpotlightCard>