Engagement Tier Rails

Pricing69: Engagement Tier Rails

Boxless pricing for service work. Each tier is a ruled column rather than a card: the name, an oversized figure with its period, a fit line, then an inclusion list under a second rule with the CTA at the foot. Subgrid keeps every internal rule on the same line across all three tiers.

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

Base UI flavor

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

This installs the block to components/beste/block/pricing69.tsx plus the badge7 eyebrow and button12 pill button it uses.

Quick start

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

import { Pricing69, pricing69Demo } from "@/components/beste/block/pricing69";

export default function Page() {
  return <Pricing69 {...pricing69Demo} />;
}

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

import { Pricing69 } from "@/components/beste/block/pricing69";

export default function Page() {
  return (
    <Pricing69
      badge={{ label: "Ways to work" }}
      heading="Three shapes of engagement, priced in daylight."
      description="Every number below is what you would actually be invoiced."
      tiers={[
        {
          name: "Full commission",
          price: "€46k",
          period: "per project",
          fit: "A brand and its first year of pages, built as one system.",
          includes: ["Named studio lead", "Guidelines written for your team"],
          buttonLabel: "Start a commission",
          href: "/contact",
          featured: true,
        },
      ]}
      labels={{ includesTitle: "Included", note: "Rates hold for six months." }}
    />
  );
}

Props

type PricingTier = {
  name: string;
  price: string;
  period: string;
  fit: string;
  includes: string[];
  buttonLabel: string;
  href: string;
  featured?: boolean;
};

type Pricing69Labels = {
  includesTitle?: string;
  note?: string;
};

Behavior notes

• featured switches that tier's CTA from tone="outline" to solid. It is the only signal for the recommended plan: no ribbon, no badge, no coloured card.
• price is a string, so a tier can read €46k, From €7.5k or Talk to us without the block doing any currency formatting.
• Alignment across tiers comes from subgrid: the container declares md:grid-rows-[repeat(6,auto)] and each tier spans all six with md:row-span-6 md:grid-rows-subgrid, so the price, the fit line, the inclusion rule and the CTA each sit on one shared line even when one fit line wraps to two.
• That is also why the row gap is md:gap-y-0: a row gap on the container would be inserted between all six shared tracks, not between tiers. Vertical rhythm inside a tier comes from the elements' own margins.
• Below md the tier falls back to flex flex-col in normal flow, since there is only one column and nothing to align against.
• Nothing is boxed: the tier opens on a border-t rule and the inclusion list opens on a second one, which is what keeps three tiers reading as one table rather than three competing cards.
• The closing note sits on its own rule under all three columns, which is where legal or rate-validity copy belongs rather than inside a tier.