# 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/cta8. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-02-17

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. [CTA](/blocks/cta)
5. /
6. Centered Newsletter CTA

# Centered Newsletter CTAFREE

Minimal centered call-to-action with heading, description, and action buttons. Perfect for newsletter signups and conversion sections.

ViewCodeDocs

Base UI

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

## Cta8: Centered Newsletter CTA

Centered call-to-action for newsletter and conversion sections: an optional badge (always paired with a mail icon), a highlightable heading, a description, a wrapping row of buttons, and a small footnote line beneath them.

Free block

This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.

### Installation

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/cta8"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/cta8"
```

This installs the block to `components/beste/block/cta8.tsx` and the `Badge` and `Button` shadcn/ui primitives it uses.

### Quick start

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

tsxCopy

```
import { Cta8, cta8Demo } from "@/components/beste/block/cta8";

export default function Page() {
  return <Cta8 {...cta8Demo} />;
}
```

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

tsxCopy

```
import { Cta8 } from "@/components/beste/block/cta8";

export default function Page() {
  return (
    <Cta8
      badge={{ label: "Newsletter" }}
      heading="Never miss a <strong>release</strong>"
      description="One email a month, product notes only, no filler."
      buttons={[
        { label: "Subscribe", href: "/subscribe" },
        { label: "See an example", href: "/archive", variant: "outline" },
      ]}
      footnote="No spam. Unsubscribe anytime."
    />
  );
}
```

### Props

| Prop        | Type                                                | Default     | Description                                                    |                                                                                 |
| ----------- | --------------------------------------------------- | ----------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| badge       | { label: string; variant?: "default" \| "secondary" | "outline" } | –                                                              | Optional pill badge above the heading, always rendered with a leading mail icon |
| heading     | string                                              | –           | Headline HTML; wrap a phrase in <strong> to color-highlight it |                                                                                 |
| description | string                                              | –           | Supporting paragraph under the heading                         |                                                                                 |
| buttons     | ButtonItem\[\]                                      | \[\]        | CTA buttons, centered and wrapping                             |                                                                                 |
| footnote    | string                                              | –           | Small muted line under the buttons                             |                                                                                 |
| className   | string                                              | –           | Extra classes for the outer <section>                          |                                                                                 |

tsCopy

```
type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};
```

### Behavior notes

* The badge always renders a hardcoded `Mail` icon before its label, regardless of `variant`; there's no way to swap or hide the icon short of omitting `badge` entirely.
* When `badge` is set without a `variant`, it falls back to `"secondary"` rather than `"default"`.
* `heading` is rendered via `dangerouslySetInnerHTML` following the project's highlight convention: only text wrapped in `<strong>` gets `text-primary`, the rest stays the default heading color.
* `footnote` renders at `text-xs text-muted-foreground` beneath the button row and is entirely optional; the demo uses it for "No spam. Unsubscribe anytime."
* Buttons default to `variant="default"` per item and link to `button.href ?? "#"`; the row is centered (`justify-center`) rather than left-aligned, matching this block's fully centered layout.

## More CTA blocks

[View all CTA](/blocks/cta)

[](/block/cta15)

PRO

cta15

### Minimal CTA

Ultra-minimal call-to-action with a single bold heading and action button. Perfect for clean, distraction-free conversion sections.

[](/block/cta74)

PRO

cta74

### Centered Closing CTA

A centered call to action with an eyebrow pill, a large light heading, a short paragraph, and two accent buttons on a clean surface.

[](/block/cta9)

PRO

cta9

### Split Layout Newsletter CTA

Two-column call-to-action with decorative image on one side and feature list with action buttons on the other. Perfect for visually rich conversion sections.

[](/block/cta68)

PRO

cta68

### Contact CTA

Centered contact call to action with an availability badge and big headline.

[](/block/cta76)

PRO

cta76

### Plan-Led Centered CTA

A centered call to action led by a floating plan price card on an image tile, followed by an eyebrow, a large light heading, a paragraph, two accent buttons, and a reassurance note.

[](/block/cta11)

FREE

cta11

### Banner CTA

Horizontal banner call-to-action with heading and action buttons side by side. Perfect for inline conversion sections between content blocks.

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