# Hero Spotlight

> Landing page hero with a spotlight gradient, grid backdrop and dual CTAs.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/hero-spotlight
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/hero-spotlight.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

```bash
npm install lucide-react
```

## Usage

```tsx title="components/hero-spotlight-demo.tsx"
import { HeroSpotlight } from "@/components/hero-spotlight"

export default function HeroSpotlightDemo() {
  return (
    <HeroSpotlight
      className="min-h-svh"
      badge={{ label: "Introducing v2.0" }}
      title="The fastest way to build your next product"
      description="Production-ready building blocks, carefully designed and fully customizable."
      primaryAction={{ label: "Start building", href: "#" }}
      secondaryAction={{ label: "View docs", href: "#" }}
    />
  )
}
```

## Source

```tsx title="components/hero-spotlight.tsx"
import * as React from "react"
import { ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"

type Action = { label: string; href: string }

export interface HeroSpotlightProps extends Omit<React.ComponentProps<"section">, "title"> {
  badge?: { label: string; href?: string }
  title: React.ReactNode
  description?: React.ReactNode
  primaryAction?: Action
  secondaryAction?: Action
  /** Color of the spotlight glow */
  spotlightColor?: string
  /** Draw the faded grid behind the content */
  showGrid?: boolean
}

export function HeroSpotlight({
  badge,
  title,
  description,
  primaryAction,
  secondaryAction,
  spotlightColor = "#f97316",
  showGrid = true,
  className,
  ...props
}: HeroSpotlightProps) {
  const id = React.useId().replace(/[^\w-]/g, "")

  return (
    <section
      className={cn(
        "relative isolate flex min-h-[560px] flex-col items-center justify-center overflow-hidden bg-background px-6 py-24 text-center text-foreground",
        className
      )}
      {...props}
    >
      {showGrid && (
        <svg
          aria-hidden
          className="pointer-events-none absolute inset-0 -z-10 h-full w-full stroke-foreground/10 [mask-image:radial-gradient(ellipse_60%_60%_at_50%_0%,black,transparent)]"
        >
          <defs>
            <pattern id={id} width={48} height={48} patternUnits="userSpaceOnUse">
              <path d="M.5 48V.5H48" fill="none" />
            </pattern>
          </defs>
          <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
        </svg>
      )}
      <div
        aria-hidden
        className="pointer-events-none absolute -top-40 left-1/2 -z-10 h-[480px] w-[720px] -translate-x-1/2 rounded-full opacity-40 blur-[100px]"
        style={{ background: spotlightColor }}
      />

      {badge && (
        <a
          href={badge.href ?? "#"}
          className="mb-6 inline-flex items-center gap-1.5 rounded-full border bg-background/60 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur transition-colors hover:text-foreground"
        >
          {badge.label}
          <ArrowRight className="size-3" />
        </a>
      )}

      <h1 className="max-w-3xl text-4xl font-semibold tracking-tight text-balance sm:text-6xl">
        {title}
      </h1>
      {description && (
        <p className="mt-5 max-w-xl text-base text-pretty text-muted-foreground sm:text-lg">
          {description}
        </p>
      )}

      {(primaryAction || secondaryAction) && (
        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
          {primaryAction && (
            <a
              href={primaryAction.href}
              className="inline-flex h-10 items-center gap-2 rounded-lg bg-foreground px-5 text-sm font-medium text-background transition-opacity hover:opacity-90"
            >
              {primaryAction.label}
              <ArrowRight className="size-4" />
            </a>
          )}
          {secondaryAction && (
            <a
              href={secondaryAction.href}
              className="inline-flex h-10 items-center rounded-lg border bg-background/60 px-5 text-sm font-medium backdrop-blur transition-colors hover:bg-muted"
            >
              {secondaryAction.label}
            </a>
          )}
        </div>
      )}
    </section>
  )
}
```