Subscriber Count Hero With Offer Bubble

Hero170: Subscriber Count Hero With Offer Bubble

A centered newsletter hero led by the subscriber count, with a speech bubble naming what arrives on joining, a row of publication marks under it, and an email row that turns into a confirmation.

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/hero170?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero170.tsx, the badge6 component used for the eyebrow, and the shadcn/ui input and button primitives behind the signup row.

Quick start

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

import { Hero170, hero170Demo } from "@/components/beste/block/hero170";

export default function NewsletterPage() {
  return <Hero170 {...hero170Demo} />;
}

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

import { Hero170 } from "@/components/beste/block/hero170";

export default function NewsletterPage() {
  return (
    <Hero170
      eyebrow="Reader list"
      heading="31,904 people read this before their first meeting of the week"
      bubble={{ text: "Free on signup: the pricing sheet we quote every project from" }}
      logosLabel="Read at"
      logos={[
        { src: "/logos/one.png", alt: "Logoipsum" },
        { src: "/logos/two.png", alt: "Logoipsum" },
      ]}
      form={{ label: "Email address", placeholder: "you@studio.com", submitLabel: "Join the list" }}
      note="The last three issues arrive straight away."
      confirmation="You are in. The back issues are on their way."
    />
  );
}

Props

type Bubble = {
  text: string;
};

type LogoItem = {
  src: string;
  alt: string;
};

type SignupForm = {
  label: string;
  placeholder: string;
  submitLabel: string;
};

Behavior notes

• The bubble's tail is a rotated square carrying two borders and the card's own background, so it reads as part of the card rather than as a separate arrow.
• The count lives in the heading string. Nothing is computed here, which keeps the number under your control and out of a client render.
• Logos are greyscale at reduced opacity and return to full colour on hover, so the row supports the claim without competing with the headline.
• Submitting swaps the row for the confirmation line in place. The state is local and no request is made.
• The logo row wraps rather than scrolls, so five marks on a phone become two lines instead of an overflow.