Seat Slider Price CalculatorPRO

Pricing68: Seat Slider Price Calculator

Per-seat pricing calculator in one hairline panel: a full-height photo on the left, a monthly and yearly toggle over a seat slider driving an oversized live count in the middle, and a soft summary column on the right where the cost breakdown and total recompute as you drag.

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

Base UI flavor

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

This installs the block to components/beste/block/pricing68.tsx, the slider and tabs shadcn/ui primitives it is built on, and the badge23 and button21 components it uses for the eyebrow and the CTA.

Quick start

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

import { Pricing68, pricing68Demo } from "@/components/beste/block/pricing68";

export default function PricingPage() {
  return <Pricing68 {...pricing68Demo} />;
}

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

import { Pricing68 } from "@/components/beste/block/pricing68";

export default function PricingPage() {
  return (
    <Pricing68
      badge={{ label: "Pricing" }}
      heading="Priced per seat"
      currency="$"
      seats={{ min: 3, max: 60, step: 1, initial: 12, label: "Team size", unit: "seats" }}
      plan={{ name: "Practice", basePrice: 90, pricePerSeat: 14, includedSeats: 5 }}
      billing={{
        monthlyLabel: "Monthly",
        yearlyLabel: "Yearly",
        yearlyDiscount: 0.2,
        monthlyNote: "billed monthly, cancel any time",
        yearlyNote: "billed yearly",
      }}
      labels={{
        baseLabel: "Platform fee",
        seatsLabel: "Additional seats",
        discountLabel: "Yearly discount",
        totalLabel: "Total",
        perMonthLabel: "per month",
        includedLabel: "Included on every plan",
      }}
      features={["Unlimited members", "Shared calendars", "Audit trail on every record"]}
      button={{ label: "Start with this plan", href: "/signup" }}
    />
  );
}

Props

type Media = {
  image: { src: string; alt: string };
  title?: string;
  description?: string;
};

type Seats = {
  min: number;
  max: number;
  step: number;
  initial: number;
  label: string;
  unit: string;
};

type Plan = {
  name: string;
  basePrice: number;
  pricePerSeat: number;
  includedSeats: number;
};

type Billing = {
  monthlyLabel: string;
  yearlyLabel: string;
  yearlyDiscount: number;
  monthlyNote: string;
  yearlyNote: string;
};

type Pricing68Labels = {
  baseLabel?: string;
  seatsLabel?: string;
  discountLabel?: string;
  totalLabel?: string;
  perMonthLabel?: string;
  includedLabel?: string;
};

Behavior notes

• The maths is one pass on every render: seats above plan.includedSeats become billable, they are multiplied by plan.pricePerSeat and added to plan.basePrice, and on yearly the subtotal loses billing.yearlyDiscount of itself. Nothing is memoised and no price is stored in state.
• billing.yearlyDiscount is a rate, not a percentage: pass 0.2 for a fifth off. The same number renders the badge inside the yearly tab as -20%.
• The monthly and yearly switch is a controlled shadcn Tabs with no TabsContent. It drives a single boolean, so the panel stays in place and only the numbers move.
• The headline price is always the monthly figure. On yearly, the line underneath multiplies it by twelve so the annual charge is stated rather than implied.
• The additional-seats row prints the count and unit price next to its label, so a total that jumped is traceable to how many seats crossed the included threshold.
• Figures use tabular-nums rather than a monospace face, which keeps the column aligned while the price changes without pulling the type out of the set's voice.
• Math.round is applied at format time only. A discount of a fraction of a currency unit still counts toward the total, it is simply displayed rounded.
• The included-features list stays single-column until xl, because between lg and xl the calculator column is too narrow for two readable columns.