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.

spotlightColor - Optional RGB color values for the spotlight effect (default: "14, 165, 233")
className - Optional class name for custom styling
children - Optional custom content