Per-Site Band Selector

Pricing73: Per-Site Band Selector

A per-site pricing table whose hairline bands are selectable, driving a soft summary panel that recomputes the rate and the whole-group total, beside an image tile floating a live sites card.

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

Base UI flavor

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

This installs the block to components/beste/block/pricing73.tsx, the location8 sites piece it floats on the tile (installed to components/beste/piece/location8.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Pricing73, pricing73Demo } from "@/components/beste/block/pricing73";

export default function GroupPricingPage() {
  return <Pricing73 {...pricing73Demo} />;
}

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

import { Location8 } from "@/components/beste/piece/location8";
import { Pricing73 } from "@/components/beste/block/pricing73";

export default function GroupPricingPage() {
  return (
    <Pricing73
      badge={{ label: "Per site" }}
      heading="The more clinics you run, the less each one costs"
      description="Groups pay per site rather than per seat."
      columns={["Sites", "Per site / month", "What it adds"]}
      tiers={[
        { range: "1 site", sites: 1, perSite: 340, note: "Everything in the product, one clinic" },
        { range: "2 to 4 sites", sites: 3, perSite: 290, note: "Shared waiting list and capacity" },
      ]}
      summaryLabel="At this band"
      currency="$"
      perSiteLabel="per site each month"
      totalLabel="for the whole group each month"
      media={
        <Location8
          title="Sites on this plan"
          region="United Kingdom"
          sites={[{ name: "Bramble Health", meta: "Bristol", value: "6 rooms" }]}
          total="13"
          totalLabel="rooms live across three sites"
        />
      }
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
      button={{ label: "Talk about a group rollout", href: "/contact" }}
    />
  );
}

Props

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

type SiteTier = {
  range: string;
  sites: number;
  perSite: number;
  note: string;
};

Behavior notes

• perSite and sites are numbers, not strings, because the block multiplies them: the group total is perSite * sites, recomputed on every selection.
• sites is a representative count for the band rather than its boundary, which is why "2 to 4 sites" carries sites: 3. The total is an illustration of that band, and the caption says so by appending the site count.
• The total is formatted with a regular expression rather than toLocaleString, which keeps the server and client output identical and avoids a hydration mismatch.
• Selection starts at index 1 rather than 0, so the page opens on a multi-site band, which is the audience the block is written for.
• Rows carry px-4, so the selected bg-muted fill extends past the text rather than cutting tight against it.
• The column header row is hidden md:grid, so on mobile the per-site cell carries an inline label from columns[1].
• The media tile is h-80 below lg and switches to lg:h-auto lg:min-h-96, so it stretches to match the table and summary panel beside it.
• Rows are real button elements with aria-pressed and explicit cursor-pointer, since Tailwind v4 buttons default to cursor: default.