Spotlight

An animated spotlight effect that creates a dramatic lighting sweep. Perfect for hero sections and feature highlights.

Preview

Spotlight Effect

Dramatic lighting for your content

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/spotlight.json

Usage

tsx
15 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Spotlight } from "@/components/ui/spotlight"

export default function Hero() {
  return (
    <div className="relative h-screen w-full bg-black/[0.96] antialiased">
      <Spotlight
        className="-top-40 left-0 md:left-60 md:-top-20"
        fill="white"
      />
      <div className="relative z-10 flex flex-col items-center justify-center h-full">
        <h1 className="text-4xl font-bold text-white">Your Headline</h1>
      </div>
    </div>
  )
}

Examples

Colored Spotlight

Purple Spotlight

Right-Side Spotlight

Cyan from Right

Props

PropTypeDefaultDescription
classNamestringundefinedCSS classes for positioning the spotlight (use top, left, right, etc.)
fillstringwhiteFill color for the spotlight effect

Styling Notes

The spotlight uses CSS animate-spotlight keyframes. Make sure your Tailwind config includes this animation for the full effect. Position the spotlight using Tailwind classes like -top-40 left-60.