Auth26: Choose Your Plan

Full-height plan selection step: a monthly/annual billing toggle above a bordered card of selectable plan cards, each showing a name, description, optional badge, and a price that updates live with the billing toggle, followed by a continue button. Built for paid sign-up and upgrade flows.

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

Base UI flavor

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

This installs the block to components/beste/block/auth26.tsx and the button, radio-group, tabs, field, and badge shadcn/ui primitives it's built on.

Quick start

The installed file exports auth26Demo alongside the block: the exact props behind the preview above. Spread it to get a working plan-selection screen in one line.

import { Auth26, auth26Demo } from "@/components/beste/block/auth26";

export default function ChoosePlanPage() {
  return <Auth26 {...auth26Demo} />;
}

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

import { Auth26 } from "@/components/beste/block/auth26";

export default function ChoosePlanPage() {
  return (
    <Auth26
      heading="Choose your plan"
      description="Start free and upgrade as your team grows."
      billingOptions={[
        { value: "monthly", label: "Monthly", priceSuffix: "/month" },
        { value: "annual", label: "Annual", priceSuffix: "/year" },
      ]}
      defaultBilling="monthly"
      plans={[
        { value: "starter", name: "Starter", description: "For individuals.", price: { monthly: "$0", annual: "$0" } },
        { value: "pro", name: "Pro", description: "For small teams.", price: { monthly: "$12", annual: "$120" }, badge: "Popular" },
      ]}
      labels={{ submit: "Continue" }}
    />
  );
}

Props

type BillingOption = { value: string; label: string; priceSuffix: string };

type Plan = {
  value: string;
  name: string;
  description: string;
  price: Record<string, string>;
  badge?: string;
};

type Auth26Labels = { submit?: string };

Behavior notes

• The Tabs component here is used purely as a segmented billing toggle: no TabsContent panels exist, and switching tabs just updates the billing state that the plan cards read from, not any tab-panel visibility.
• Each plan card is a <label> wrapping a RadioGroupItem, so clicking anywhere on the card (not just the radio dot) selects that plan; the active card gets a border-primary bg-primary/5 treatment.
• A plan's displayed price is plan.price[billing], looked up by the current billing tab's value; if a plan's price object is missing a key for the active billing option, that price renders blank, so every plan needs a price entry for every billingOptions value.
• selectedPlan initializes to plans[0]?.value and billing initializes to defaultBilling ?? billingOptions[0]?.value, so the first plan and first billing option are pre-selected without any prop needed.
• The <form> only calls e.preventDefault() on submit; there is no onSubmit prop, so the continue button doesn't carry the selected plan or billing cycle anywhere on its own, the integrator has to read selectedPlan/billing state or fork the component to lift it.