Spotlight Card

An interactive card with a spotlight hover effect that highlights content and enhances user engagement visually.

Spotlight Card

Hover to see the spotlight effect.

Installation

npx scrollx-ui@latest add spotlightcard

Usage

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

<SpotlightCard className="w-80 h-72" spotlightColor="34, 211, 238">
    <div className="w-full h-full flex flex-col items-center justify-center text-center">
      <h3 className="text-xl font-semibold mb-1">Spotlight Card</h3>
      <p className="text-sm text-muted-foreground">
        Hover to see the spotlight effect.
      </p>
    </div>
  </SpotlightCard>

API Reference

SpotlightCard

The root component that creates the spotlight effect card.

Props

Property	Type	Default	Description
`spotlightColor`	string	`"14, 165, 233"`	RGB values for spotlight glow.
`className`	string	`—`	Optional class for custom styling.
`children`	ReactNode	`optional`	Content rendered inside the spotlight container.