Waitlist Email Hero

Hero126: Waitlist Email Hero

Centered waitlist hero: eyebrow, heading, description, an inline email-capture form that collapses to a single row on desktop, and an overlapping circular avatar stack with a trust line beneath it.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero126?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero126?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero126.tsx, the badge7 eyebrow badge and button12 submit button it renders through, and its dependencies.

Quick start

The installed file exports hero126Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero126, hero126Demo } from "@/components/beste/block/hero126";

export default function Page() {
  return <Hero126 {...hero126Demo} />;
}

Then replace the demo with your own props. Written out, the same setup looks like this:

import { Hero126 } from "@/components/beste/block/hero126";

export default function Page() {
  return (
    <Hero126
      badge={{ label: "Joining soon" }}
      labels={{
        placeholder: "you@studio.email",
        trust: "847 founders, art directors and makers already on the list",
      }}
      heading="The studio for <strong>what comes next.</strong>"
      description="We are opening a small practice for brands that refuse the template."
      button={{ label: "Reserve a seat", href: "https://beste.co" }}
      avatars={[
        { src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=80&h=80&fit=crop", alt: "Portrait of a founder on the waitlist" },
        { src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=80&h=80&fit=crop", alt: "Portrait of an art director on the waitlist" },
      ]}
    />
  );
}

Props

type Badge = { label: string };
type Hero126Labels = { placeholder?: string; trust?: string };
type ActionButton = { label: string; href: string };
type Hero126Avatar = { src: string; alt: string };

Behavior notes

• The form's onSubmit handler only calls event.preventDefault(); there is no onSubmit prop, so wiring the email capture to a real endpoint means editing the installed component after install (or replacing the <form> with your own).
• The email input renders only when labels.placeholder is set; without it, the form still mounts but shows just the submit button.
• Avatars overlap with a negative -space-x-3 stack and a border-2 border-background ring around each one, so they read as a continuous stack even against a matching page background.
• The avatar row and the trust sentence share one visibility condition: they render together whenever either avatars.length > 0 or trust is set, so a trust line with zero avatars (or avatars with no trust line) still displays correctly.
• The input/button pair only becomes a single row (sm:flex-row) at the sm breakpoint; below that they stack vertically, full width.