# 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/cta94. 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. [CTA](/blocks/cta)
5. /
6. Cadence Picker Signup

# Cadence Picker Signup[PRO](/pricing)

A narrow signup where the reader first picks how often they want to hear from you, the paragraph underneath rewriting itself for the choice, before the single email row is filled in.

ViewCodeDocs

Base UI

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

## Cta94: Cadence Picker Signup

A narrow signup where the reader first picks how often they want to hear from you, the paragraph underneath rewriting itself for the choice, before the single email row is filled in.

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

**Base UI flavor**

bashCopy

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

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

tsxCopy

```
import { Cta94, cta94Demo } from "@/components/beste/block/cta94";

export default function SubscribePage() {
  return <Cta94 {...cta94Demo} />;
}
```

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

tsxCopy

```
import { Cta94 } from "@/components/beste/block/cta94";

export default function SubscribePage() {
  return (
    <Cta94
      eyebrow="Your inbox, your rules"
      heading="Choose how often you hear from us"
      cadences={[
        { label: "Every week", detail: "One letter on Tuesday morning, around 700 words." },
        { label: "Once a month", detail: "The three pieces worth keeping, on the first Tuesday." },
      ]}
      placeholder="you@studio.com"
      submitLabel="Set it up"
      note="You can change the rhythm from any issue."
      confirmation="Saved. The first one arrives on the schedule you picked."
    />
  );
}
```

### Props

| Prop         | Type        | Default | Description                                 |
| ------------ | ----------- | ------- | ------------------------------------------- |
| eyebrow      | string      | –       | Badge6 label above the heading              |
| heading      | string      | –       | Section heading                             |
| cadences     | Cadence\[\] | \[\]    | Options, rendered as a row of buttons       |
| placeholder  | string      | –       | Placeholder in the email field              |
| submitLabel  | string      | –       | Label on the submit button                  |
| 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 Cadence = {
  label: string;
  detail: string;
};
```

### Behavior notes

* The paragraph under the buttons is the selected cadence's `detail`, so the choice explains itself instead of needing a description beside every option.
* The first cadence is selected on load, and selection is held by index rather than by label, so two options may share wording.
* Options are real buttons with the active one filled `bg-foreground text-background`. They wrap onto a second line on a narrow screen instead of scrolling.
* Submitting swaps the row for the confirmation line in place. The chosen cadence is in component state, so read it there when you connect this to a list.

## More CTA blocks

[View all CTA](/blocks/cta)

[](/block/cta92)

FREE

cta92

### Tailored Subscription

A newsletter CTA that asks before it asks for an address: subjects, then cadence, then the email, and the column swaps itself for a confirmation that reads back exactly what was chosen.

[](/block/cta26)

PRO

cta26

### Countdown CTA

Urgency-driven call-to-action with countdown numbers and limited-time offer messaging. Perfect for launches and time-sensitive promotions.

[](/block/cta42)

PRO

cta42

### Quote Carousel CTA

Rotating testimonial quotes with author info and persistent call-to-action buttons. Perfect for social proof that stays fresh.

[](/block/cta22)

PRO

cta22

### Highlight Card CTA

Card-style call-to-action with value-driven highlight metrics in a bordered grid. Perfect for data-backed conversion sections.

[](/block/cta85)

PRO

cta85

### Migration Process CTA

A closing call to action on a soft section that puts a live step tracker between centered copy and three hairline notes, then lands on a single action with its fine print.

[](/block/cta91)

PRO

cta91

### Handheld Reminder CTA

A closing call to action that leads with a narrow portrait tile floating a live phone frame, then sets centered copy and two actions beneath it over three hairline promises.

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