Hero Sections — UI Block

Landing page heroes with real motion: a pointer-lit dot grid with a rotating last word, and copy beside product cards that part as you scroll.

Pro
Hero blocks
2 sections

Install

One command adds every section. Pro blocks need your API key in the registry settings.

$ npx shadcn@latest add @nexus-labs/hero-blocks

Full setup guide

Install the complete Hero Sections family with its 2 variants. The registry command adds the source files, required utility imports, and npm packages used by this block.

1
Prepare a shadcn project
Use a Next.js project with Tailwind CSS and the @/ alias. If shadcn is not configured yet, run:
```
npx shadcn@latest init
```

Connect the registry with your API key

Replace your components.json with this, or add the registries key to your existing one. Replace YOUR_NEXUS_API_KEY with the key from your Nexus UI dashboard.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": {
      "url": "https://www.nexus-ui.com/api/registry/{name}",
      "headers": {
        "Authorization": "Bearer YOUR_NEXUS_API_KEY"
      }
    }
  }
}

3
Install the full block family
Run this command from your project root. It installs every variant shown on this page.
```
npx shadcn@latest add @nexus-labs/hero-blocks
```
4
Files added to your project
The component package installs these block source files:
components/
blocks/
motion-kit/
parallax-stack-hero/
parallax-stack-hero.tsx
spotlight-hero/
spotlight-hero.tsx
5
Copy the example into your page
Switch to the Codetab on the variant you want. On the left you'll see a ready-to-use snippet — copy it and paste it into app/page.tsx:
```
// app/page.tsx
import YourBlock from "@/components/...";

export default function Page() {
  return (
    <main>
      <YourBlock />
    </main>
  );
}
```
The exact import path is shown in the Code tab sidebar for each variant.