Spotlight Card

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

Spotlight Card

Hover over this card to see the spotlight effect

An interactive card component with spotlight hover effect

Installation

npx scrollx-ui@latest add spotlightcard

Usage

import { SpotlightCard } from "@/components/ui/spotlight-card";
<SpotlightCard
  title="Spotlight Card"
  description="Hover over this card to see the spotlight effect"
  spotlightColor="14, 165, 233"
/>

API Reference

SpotlightCard

The root component that creates the spotlight effect card.

  • title - Optional title text for the card
  • description - Optional description text for the 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 to replace default title/description layout