Three Tiers With Billing Toggle

Pricing71: Three Tiers With Billing Toggle

A three-tier pricing grid whose monthly and yearly toggle swaps both the light figure and the billing note on every card, with the recommended tier outlined in the accent.

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

Base UI flavor

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

This installs the block to components/beste/block/pricing71.tsx, the shadcn/ui tabs component it depends on, and the badge23 and button21 components it uses for the eyebrow and the tier actions.

Quick start

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

import { Pricing71, pricing71Demo } from "@/components/beste/block/pricing71";

export default function PricingPage() {
  return <Pricing71 {...pricing71Demo} />;
}

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

import { Pricing71 } from "@/components/beste/block/pricing71";

export default function PricingPage() {
  return (
    <Pricing71
      badge={{ label: "Pricing" }}
      heading="Per seat, per month, and nothing underneath it"
      description="Every plan includes multi-site, the audit log, and full export."
      monthlyLabel="Monthly"
      yearlyLabel="Yearly"
      savingLabel="2 months free"
      featuredLabel="Most practices"
      tiers={[
        {
          name: "Single clinic",
          tagline: "One site, one rota, no card required.",
          monthly: "Free",
          yearly: "Free",
          period: "",
          yearlyNote: "Free for as long as you stay on one site",
          features: ["One site and up to 5 seats", "Booking page and reminders"],
          button: { label: "Start free", href: "/signup" },
        },
        {
          name: "Practice",
          tagline: "The whole product for a working practice.",
          monthly: "$29",
          yearly: "$24",
          period: "per seat / month",
          yearlyNote: "Billed yearly, $290 per seat",
          features: ["Unlimited sites and seats", "Immutable audit log"],
          button: { label: "Book a demo", href: "/demo" },
          featured: true,
        },
      ]}
      footnote="Seats move up and down mid-month and we prorate both directions."
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type Tier = {
  name: string;
  tagline: string;
  monthly: string;
  yearly: string;
  period: string;
  yearlyNote: string;
  features: string[];
  button: ActionLink;
  featured?: boolean;
};

Behavior notes

• The toggle is a shadcn/ui Tabs in controlled mode, mapped onto one boolean of state. Using Tabs rather than a hand-rolled switch is what gives it roving focus and arrow-key movement for free.
• Every tier carries both a monthly and a yearly figure, so the toggle swaps values rather than computing a discount. A tier that does not vary, like a free plan, simply repeats the same string.
• The billing note under the figure swaps too: yearlyNote when yearly, and a hard-coded "Billed monthly, cancel any time" when monthly. That monthly string lives in the block rather than in props, so localising it means editing the installed file.
• period renders only when non-empty, which is how a free tier drops the "per seat / month" clause.
• featured switches the card border to the accent and the action from outline to primary, and gates the featuredLabel chip. Nothing enforces a single featured tier.
• Cards are flex flex-col with the feature list marked flex-1, so all three actions land on the same line regardless of how many features each tier lists.
• Feature lists carry border-t with no closing rule, so the list flows into the action rather than boxing itself off.
• Tabs triggers carry explicit cursor-pointer, since Tailwind v4 buttons default to cursor: default.