Spotlight Hero

Pro

Hero section where a radial spotlight follows the user's cursor across a grid background.

Pro component — requires an active license. Get access →

Move cursor here

Installation

Add your token to .env

Get a token from your dashboard, then add it to .env:

bash

PARTICLEUI_TOKEN=your-token-here

Add the registry to components.json

Wire up the authenticated registry so the CLI can resolve Pro components:

bash

"registries": {
  "@particleui": {
    "url": "https://particleui.dev/r/react/{name}.json",
    "headers": { "Authorization": "Bearer ${PARTICLEUI_TOKEN}" }
  }
}

Run the CLI

bash

npx particleui-cli add spotlight-hero

Usage

TSX

import { SpotlightHero } from "@/components/blocks/spotlight-hero"

export default function Page() {
  return <SpotlightHero />
}

Props

Prop	Type	Default	Required
headline	React.ReactNode	—	yes
subtext	string	—	no
cta	{ label: string; href: string; primary?: boolean }[]	`[]`	no
className	string	—	no

Details

Source filecomponents/blocks/spotlight-hero.tsx

Typeblock

Categoriesblocks, hero, animations

npm dependenciesclsx, tailwind-merge

Registry deps—

Claude skillBundled — installs to ~/.claude/skills/