Ink Comparison Table

Pricing83: Ink Comparison Table

The full comparison in ink: plan columns with prices that blur to their new value, then grouped feature rows of ticks, dashes and short values that scroll sideways on a narrow screen.

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

Base UI flavor

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

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

Quick start

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

import { Pricing83, pricing83Demo } from "@/components/beste/block/pricing83";

export default function Page() {
  return <Pricing83 {...pricing83Demo} />;
}

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

import { Pricing83 } from "@/components/beste/block/pricing83";

export default function Page() {
  return (
    <Pricing83
      eyebrow="Compare plans"
      heading="Everything, side by side."
      description="The full list."
      labels={{
        monthly: "Monthly",
        yearly: "Yearly",
        saving: "Two months free",
        perMonth: "/ month",
        included: "Included",
        notIncluded: "Not included",
      }}
      yearlyDefault
      plans={[
        { name: "Studio", monthly: "$29", yearly: "$24", button: { label: "Choose Studio", href: "/signup" }, featured: true },
      ]}
      groups={[
        {
          title: "Library",
          rows: [
            { label: "Sections and components", values: [true] },
            { label: "Projects", values: ["5"] },
          ],
        },
      ]}
    />
  );
}

Props

type Plan = {
  name: string;
  monthly: string;
  yearly: string;
  button: { label: string; href: string };
  featured?: boolean;
};

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

type Group = {
  title: string;
  rows: Row[];
};

type Labels = {
  monthly: string;
  yearly: string;
  saving?: string;
  perMonth: string;
  included: string;
  notIncluded: string;
};

Behavior notes

• The switch is a radiogroup of two buttons with an ink marker that slides between them through a shared layoutId, so the movement comes from the layout engine rather than a hand-written transform.
• Prices swap inside an inline-grid where both values share one cell, which lets the number keep its natural width so the unit label always sits right beside it.
• The saving note collapses its width and margin together rather than unmounting, so the switch drifts back to its resting position instead of jumping when you leave the yearly cycle.
• The heading column is capped at lg:max-w-lg and the header only becomes a row at the large breakpoint, which leaves enough slack that the growing saving note never steals width from the heading and wraps it onto a second line.
• A cell takes either a boolean or a string: true draws a tick, false draws a dash, and a string is printed as it is, which is how one row can say Unlimited while the next says yes or no.
• Each values array is read by column index, so a row with fewer entries than there are plans falls back to a dash rather than shifting the remaining cells left, and every icon carries an aria-label from the labels prop so a screen reader hears Included instead of nothing at all.
• Tick icons are drawn in background/85 rather than the accent, because an accent-coloured icon disappears against the ink surface.
• The table has a min-w-[40rem] inside an overflow-x-auto wrapper, so it scrolls sideways on a phone rather than compressing the columns to nothing.
• Each group is its own tbody with a rowgroup heading, which keeps the group titles tied to their rows in the accessibility tree, and the whole section is painted ink in both themes so every token here is a fixed background value.