AceUi

SpotLight

An interactive spotlight effect component that follows mouse movement, creating an elegant hover illumination effect.

Hover me
The SpotLight component creates a beautiful spotlight effect that follows your mouse cursor, perfect for cards, buttons, and interactive elements that need an elegant hover state

Installation

1npx shadcn@latest add "https://ace-ui-six.vercel.app/r/spotlight.json"

Usage

1import { SpotLight } from "@/components/ui/spot-light";
2

3export default function Example() {
4return (
5  <div>
6    <SpotLight
7      className="h-52 w-40 flex justify-center items-center bg-black border border-white"
8      spotlightColor="rgba(151, 151, 151, 0.1)"
9    >
10      Hover me
11    </SpotLight>
12  </div>
13);
14}

Features

  • Smooth spotlight effect that follows mouse movement
  • Customizable spotlight color with RGBA support
  • Responsive to mouse enter, leave, focus, and blur events
  • Fade in/out animations for smooth transitions
  • TypeScript support with proper type definitions

Props

PropTypeDefaultDescription
childrenReact.ReactNode"Hover me"Content to display inside the spotlight container
classNamestring"h-52 w-40 flex justify-center items-center bg-black border border-white"CSS classes for styling the container
spotlightColorstring'rgba(151, 151, 151, 0.1)'Color of the spotlight effect in RGBA format

Color Examples

Here are some popular spotlight color combinations:

1// Subtle gray (default)
2spotlightColor="rgba(151, 151, 151, 0.1)"
3

4// Blue accent
5spotlightColor="rgba(59, 130, 246, 0.15)"
6

7// Purple glow
8spotlightColor="rgba(168, 85, 247, 0.2)"
9

10// Green highlight  
11spotlightColor="rgba(34, 197, 94, 0.1)"
12

13// Red warning
14spotlightColor="rgba(239, 68, 68, 0.12)"
15

16// Gold premium
17spotlightColor="rgba(245, 158, 11, 0.15)"
18

19// Cyan modern
20spotlightColor="rgba(6, 182, 212, 0.1)"