CTA Sections — UI Block

The last push before the footer: a call to action on a slow nebula, with a glow that follows the pointer to the button and a press that answers back.

Pro
CTA sections
1 section

Install

One command adds every section. Pro blocks need your API key in the registry settings. Some sections install on their own, with the command shown in each one's code.

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

Full setup guide

Install the complete CTA Sections family with its 1 variant. 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/cta-blocks
```
4
Files added to your project
The component package installs these block source files:
components/
nebula-cta-glow/
nebula-cta-glow.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.

1 of 1Pro

Nebula CTA Glow

Ready when you are

Start building faster

Every component, live and editable. Copy the code or install it in one line.

Start buildingBrowse components

Bring the pointer to the button, then press it.

CTA Sections — UI Block

Nebula CTA Glow

Start building faster

More blocks