Cadence Picker SignupPRO

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.

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

Base UI flavor

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.

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:

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

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.