# 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/hero169. 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. Centered Newsletter Hero With Reader Quote

# Centered Newsletter Hero With Reader Quote[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

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

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/hero169.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 `hero169Demo` alongside the block: the exact props behind the preview above. Spread it to get a working signup hero in one line.

tsxCopy

```
import { Hero169, hero169Demo } from "@/components/beste/block/hero169";

export default function NewsletterPage() {
  return <Hero169 {...hero169Demo} />;
}
```

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

tsxCopy

```
import { Hero169 } from "@/components/beste/block/hero169";

export default function NewsletterPage() {
  return (
    <Hero169
      eyebrow="The Tuesday memo"
      heading="A short letter about the money side of creative work"
      quote={{
        text: "It is the first thing I open on a Tuesday.",
        name: "Maria Santos",
        title: "Head of Brand at Northwind",
        avatar: { src: "/people/maria.jpg", alt: "Maria Santos" },
      }}
      form={{ label: "Email address", placeholder: "you@studio.com", submitLabel: "Subscribe" }}
      note="Sent Tuesday mornings. The unsubscribe link sits at the top of every issue."
      confirmation="Check your inbox. The most recent memo is on its way now."
    />
  );
}
```

### Props

| Prop         | Type       | Default | Description                                        |
| ------------ | ---------- | ------- | -------------------------------------------------- |
| eyebrow      | string     | –       | Badge6 label above the headline                    |
| heading      | string     | –       | Hero headline                                      |
| quote        | Quote      | –       | Reader quote in a bordered card under the headline |
| 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 Quote = {
  text: string;
  name: string;
  title?: string;
  avatar?: Avatar;
};

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

type Avatar = {
  src: string;
  alt: string;
};
```

### Behavior notes

* Submitting swaps the form for the confirmation line in place, so the page does not jump and the reader can see what changed. The state is local and there is no request, so point the `onSubmit` at your own list when you wire it up.
* The quote card is the only left-aligned thing in a centered hero. That is deliberate: a paragraph of testimony centred under a headline is hard to read.
* `quote.title` is optional and printed after a comma, so a quote can carry a name alone.
* The form is a single row from `sm` up and stacks below it, with the input and the button both `h-14` so the row keeps one height.
* The input is typed `email` and `required`, which means the browser validates it before the block ever sees the submit.

## More Hero blocks

[View all Hero](/blocks/hero)

[](/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/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/hero170)

PRO

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.

[](/block/hero7)

FREE

hero7

### Centered Hero with Media

Centered hero with optional badge, heading, description, dual action buttons, and a featured image below. Perfect for product launches and landing pages.

[](/block/hero68)

FREE

hero68

### Centered Hero with Feature Icons

Centered hero with three feature highlights displayed as icon cards with descriptions below the CTA. Perfect for platform and infrastructure products.

[](/block/hero122)

PRO

hero122

### Typographic Card Hero

Centered typographic hero on a muted card with an oversized heading, inline CTA, and a bottom monospace meta row of three labels.

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