Hero with email capture and avatar social proof.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/hero-waitlist
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { WaitlistHero } from "@/components/blocks/hero-waitlist";45export function Waitlist() {6return (7<WaitlistHero8eyebrow="Early access · Q1"9title="Notes that organise themselves"10ctaLabel="Request access"11socialProof="Join 900+ teams on the list"12onSubmit={async (email) => {13await fetch("/api/waitlist", { method: "POST", body: JSON.stringify({ email }) });14}}15/>16);17}
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Private beta · Spring 2027" | Small line above the headline |
| title | string | "The inbox that writes back for you" | Headline |
| description | string | "Drafts replies in your voice…" | Paragraph under the headline |
| placeholder | string | "you@company.com" | Email field placeholder |
| ctaLabel | string | "Join the waitlist" | Submit button text |
| avatars | string[] | ["AN", "JL", "MK", "TP", "RS"] | Initials in the avatar stack |
| rating | number | 5 | Number of stars next to the avatars |
| socialProof | string | "Loved by 2,400+ early users" | Line under the stars |
| onSubmit | (email: string, event: FormEvent) => void | – | Called with the email; the native submit is prevented when set |
| className | string | – | Extra classes on the section |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.