Rhythm Comparison

Pricing76: Rhythm Comparison

A real comparison table: three plans across the head with their prices, a ruled body of feature rows carrying ticks, dashes or short values, and each plan's action in the final row.

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

Base UI flavor

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

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

Quick start

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

import { Pricing76, pricing76Demo } from "@/components/beste/block/pricing76";

export default function Page() {
  return <Pricing76 {...pricing76Demo} />;
}

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

import { Pricing76 } from "@/components/beste/block/pricing76";

export default function Page() {
  return (
    <Pricing76
      eyebrow="Side by side"
      heading="Three rhythms, one set of rules."
      description="Whatever the rhythm, sessions are the same length and the same people."
      plans={[
        { name: "Monthly", price: "$60", cadence: "one session a month", button: { label: "Choose monthly", href: "/monthly", tone: "outline" } },
        { name: "Weekly", price: "$240", cadence: "twelve weeks", button: { label: "Choose weekly", href: "/weekly", tone: "dark" } },
      ]}
      rows={[
        { label: "Session length", values: ["60 min", "75 min"] },
        { label: "Voice notes between sessions", values: [false, true] },
      ]}
      labels={{ included: "Included", notIncluded: "Not included" }}
    />
  );
}

Props

type Plan = {
  name: string;
  price: string;
  cadence: string;
  button: ActionButton;
};

type FeatureRow = {
  label: string;
  values: (boolean | string)[];
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• This is a real table with thead, tbody and th scope="row", so a screen reader can announce which plan a cell belongs to. A grid of divs cannot do that, and a pricing comparison is exactly the case where it matters.
• Each values array must line up with plans by position; a shorter array simply leaves the trailing cells empty rather than shifting the columns.
• A value may be a boolean or a string in the same row, so "60 min" and a plain tick live in one table without a second prop.
• Ticks and dashes carry sr-only text from labels, so a cell is never announced as an unlabelled icon; the visual mark and the spoken word come from the same place.
• A missing feature is a dash, not a cross, so the table states a difference without scoring a point against a plan.
• The table has a min-w-[44rem] inside an overflow-x-auto wrapper, so on a phone it scrolls sideways as one object instead of collapsing into unreadable columns.
• Rows enter with a 0.06s stagger, tight enough that a seven-row table resolves as one object.