Spotlight Card

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

Installation

npx shadcn@latest add @scrollxui/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.