Three Plans Toggle

Pricing79: Three Plans Toggle

Three plan cards under a monthly and yearly switch: the marker slides between the two cycles, the prices blur to their new value, and the middle plan is painted ink.

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

Base UI flavor

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

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

Quick start

The installed file exports pricing79Demo alongside the block: the exact props behind the preview above. Spread it to get a working pricing section in one line.

import { Pricing79, pricing79Demo } from "@/components/beste/block/pricing79";

export default function Page() {
  return <Pricing79 {...pricing79Demo} />;
}

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

import { Pricing79 } from "@/components/beste/block/pricing79";

export default function Page() {
  return (
    <Pricing79
      eyebrow="Pricing"
      heading="Pay for the pace you work at."
      description="Three plans, one library."
      labels={{
        monthly: "Monthly",
        yearly: "Yearly",
        saving: "Two months free",
        perMonth: "/ month",
        billedYearly: "billed yearly",
        billedMonthly: "billed monthly",
      }}
      yearlyDefault
      plans={[
        {
          name: "Studio",
          description: "For a small team shipping a few sites.",
          monthly: "$29",
          yearly: "$24",
          features: ["Five projects", "Shared themes"],
          button: { label: "Start with Studio", href: "/signup" },
          featured: true,
        },
      ]}
      note="Prices in US dollars. Cancel at any time."
    />
  );
}

Props

type Plan = {
  name: string;
  description: string;
  monthly: string;
  yearly: string;
  features: string[];
  button: { label: string; href: string };
  featured?: boolean;
};

type Labels = {
  monthly: string;
  yearly: string;
  saving?: string;
  perMonth: string;
  billedYearly: string;
  billedMonthly: string;
};

Behavior notes

• The switch is a radiogroup of two buttons with an ink marker that slides between them through a shared layoutId, so the movement comes from the layout engine rather than a hand-written transform.
• Prices swap inside an inline-grid where both values share one cell, which lets the number keep its natural width so the unit label always sits right beside it.
• The saving note collapses its width and margin together rather than unmounting, so the switch drifts back to its resting position instead of jumping when you leave the yearly cycle.
• Prices are strings rather than numbers, so a plan can read $24, Free or Talk to us without the block needing to know about currency.
• The billing line under the price sits in an aria-live region, which is how a screen reader learns the cycle changed without being told about every card.
• Tick icons on the featured card use text-current rather than the accent, because an accent-coloured icon disappears against the ink surface.
• The featured plan takes the ink surface and a light pill, while the others take the muted surface and a dark pill, so the emphasis holds in both themes.