Newsletter Signup — UI Block

An email signup that catches typos like gmial.com and offers the fix before you submit, then counts you in.

Pro
CTA sections
1 section

Install

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

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

Full setup guide

Install the complete Newsletter Signup 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/newsletter-blocks
```
4
Files added to your project
The component package installs these block source files:
components/
blocks/
motion-kit/
typo-catching-signup/
typo-catching-signup.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.

More blocks

See the whole wall ›

NewsletterNewsletter Signup — UI Block

Typo-catching Signup

One good email, every Sunday.

More blocks

Newsletter Signup — UI Block