Hero Spotlight
A launch hero with a pulsing eyebrow, blur-in headline with a cursor lit second line, two actions, a proof line and a product visual that tilts into place.
src/registry/blocks/hero-spotlight.tsx/r/hero-spotlight.json
Installation#
bash
npx shadcn@latest add https://ui.minidev.pro/r/hero-spotlight.json
Usage#
tsx
import { HeroSpotlight } from "@/components/ui/hero-spotlight"
export function Example() {
return <HeroSpotlight />
}
API reference#
| Prop | Type | Default |
|---|---|---|
eyebrow | React.ReactNode | "Now in public beta" |
title | React.ReactNode | "Answers from your data," |
highlight | React.ReactNode | "before you ask." |
description | React.ReactNode | "Lumen watches revenue, churn and pip... |
primary | { label: string; href?: string; onClick?: () => void } | { label: "Start free" } |
secondary | { label: string; href?: string; onClick?: () => void } | { label: "Watch the 2 min tour" } |
proof | React.ReactNode | "Free for 14 days · No card · SOC 2 T... |
visual | React.ReactNode | - |
align | "center" | "left" | "center" |
className | string | - |
Dependencies#
npm
lucide-reactmotion
Built from
Related landing pages components#
Bento LiveA React bento feature grid where each tile runs a live demo: a rolling MRR counter, a typed AI answer, ranked alerts and an orbiting integrations ring.Changelog PageA Tailwind changelog card listing releases with a monospace version, tag badge, date, title and summary, separated by hairline dividers.Cta BandA closing CTA section with a large lit headline and an inline email form whose button animates from idle to sending to a success check. Async onSubmit.Faq SectionAn FAQ section with a heading column and an accessible accordion: one answer open at a time, arrow key navigation, aria-expanded and smooth row animation.Marketing LandingA complete Tailwind landing page assembled from a hero with two actions, a logo cloud, a stats strip, a three column feature grid and a closing CTA banner.Premium LandingA React motion landing page combining an aurora hero, an animated feature row, three tier pricing cards that rise into view and a glowing closing CTA.
All Landing page sections for React and Tailwind