# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/hero170. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Hero](/blocks/hero)
5. /
6. Subscriber Count Hero With Offer Bubble

# Subscriber Count Hero With Offer Bubble[PRO](/pricing)

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.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/hero170`

## 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.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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:

tsxCopy

```
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

| Prop         | Type         | Default | Description                                  |
| ------------ | ------------ | ------- | -------------------------------------------- |
| eyebrow      | string       | –       | Badge6 label above the headline              |
| heading      | string       | –       | Hero headline, usually carrying the count    |
| bubble       | Bubble       | –       | Speech bubble naming what arrives on joining |
| logosLabel   | string       | –       | Small label above the logo row               |
| logos        | LogoItem\[\] | \[\]    | Publication marks, wrapped and centered      |
| form         | SignupForm   | –       | Labels for the email row                     |
| note         | string       | –       | Fine print under the row                     |
| confirmation | string       | –       | Line that replaces the row after submitting  |
| className    | string       | –       | Extra classes for the outer section          |

tsCopy

```
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.

## More Hero blocks

[View all Hero](/blocks/hero)

[](/block/hero169)

PRO

hero169

### Centered Newsletter Hero With Reader Quote

A centered newsletter hero that puts one reader quote in a bordered card between the headline and the email row, and swaps the row for a confirmation line once it is submitted.

[](/block/hero69)

FREE

hero69

### Email Signup Hero

Minimal centered hero with inline email input field and submit button for newsletter or waitlist signups. Perfect for coming-soon pages and early access campaigns.

[](/block/hero126)

PRO

hero126

### Waitlist Email Hero

Centered waitlist hero with eyebrow, big heading, description, an inline email-capture form and an overlapping avatar trust row.

[](/block/hero50)

PRO

hero50

### Centered Hero with Announcement Pill

Clean centered hero with clickable announcement banner pill above the heading with sparkle icon. Perfect for product launches and feature announcements.

[](/block/hero61)

PRO

hero61

### Split Hero with Floating Feature Cards

Two-column hero with announcement banner, social proof metrics, and three floating feature cards with hover animations. Perfect for SaaS product launches.

[](/block/hero166)

PRO

hero166

### Split Headline Hero

An editorial hero that breaks its display heading across two lines and slots a square image tile floating a live payment card into the gap, with the paragraph and action landing under a hairline.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.