Ruled Plan Rows

Pricing80: Ruled Plan Rows

Plans as ruled rows rather than cards: the name and its line on the left, the price in the middle, the pill at the end, all held on a fixed grid so the figures stay aligned.

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

Base UI flavor

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

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

Quick start

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

import { Pricing80, pricing80Demo } from "@/components/beste/block/pricing80";

export default function Page() {
  return <Pricing80 {...pricing80Demo} />;
}

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

import { Pricing80 } from "@/components/beste/block/pricing80";

export default function Page() {
  return (
    <Pricing80
      eyebrow="Plans"
      heading="Three rows, no surprises."
      description="Nothing is unlocked later."
      labels={{ monthly: "Monthly", yearly: "Yearly", saving: "Save 20%", perMonth: "/ month" }}
      plans={[
        {
          name: "Studio",
          description: "A small team, a few sites.",
          monthly: "$29",
          yearly: "$24",
          button: { label: "Choose Studio", href: "/signup" },
          featured: true,
        },
      ]}
      note="All prices in US dollars, before tax."
    />
  );
}

Props

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

type Labels = {
  monthly: string;
  yearly: string;
  saving?: string;
  perMonth: 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 row grid uses fixed track widths for the price and the pill rather than letting them size to content, which is what keeps prices aligned down the page when one plan's button label is longer than another's.
• Rows carry no feature list on purpose. This is the layout for a page where the comparison lives in its own section further down.
• The featured plan is marked with a small accent dot beside its name rather than a different surface, since a filled row would break the ruling.
• The switch sits at the right end of the header, so the rows below it start clean.