One Line CTA

Cta105: One Line CTA

A one-line closing rule for the foot of a long page: a serif sentence that settles in word by word above a quiet link, with a pill held at the other end of the same ruled row.

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

Base UI flavor

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

This installs the block to components/beste/block/cta105.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports cta105Demo alongside the block: the exact props behind the preview above. Spread it to get a working closing row in one line.

import { Cta105, cta105Demo } from "@/components/beste/block/cta105";

export default function Page() {
  return <Cta105 {...cta105Demo} />;
}

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

import { Cta105 } from "@/components/beste/block/cta105";

export default function Page() {
  return (
    <Cta105
      heading="Still reading? That usually means it is time."
      link={{ label: "Read what a first session is like", href: "/first-session" }}
      button={{ label: "Book the first one", href: "/book", tone: "dark" }}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The line is a p, not a heading. This is a closing rule rather than a section, and promoting a full sentence to an h2 would put it in the page outline as if it were one.
• Its stagger is tightened to 0.04s from the component's default, which suits a sentence read in one glance rather than a display heading read word by word.
• Section padding is deliberately small, py-12 rising to py-16, so the row reads as a rule at the foot of the page above it instead of as another full section.
• The button carries shrink-0, so a long heading wraps rather than squeezing the action.
• The row stacks below md and only becomes a justify-between line above it, so the pill sits under the sentence on a phone rather than beside it.
• The border-y is on the inner row, not the section, so the rules sit inside the page gutter and line up with the content column above them.