Project Estimate Ledger

Pricing70: Project Estimate Ledger

Range-based pricing for studios that quote per project instead of per seat. Each project type is a ruled row listing what it usually includes, how long it runs and the figure it starts from, with column headers appearing only where there is room for them.

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

Base UI flavor

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

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

Quick start

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

import { Pricing70, pricing70Demo } from "@/components/beste/block/pricing70";

export default function Page() {
  return <Pricing70 {...pricing70Demo} />;
}

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

import { Pricing70 } from "@/components/beste/block/pricing70";

export default function Page() {
  return (
    <Pricing70
      badge={{ label: "Starting points" }}
      heading="What a project like yours has cost before."
      description="Real ranges from the last two years of work, not a calculator."
      rows={[
        {
          title: "Marketing site",
          scope: "Architecture, templates, copy support and build supervision.",
          duration: "10 to 14 weeks",
          price: "€32,000",
        },
      ]}
      button={{ label: "Get a written estimate", href: "/estimate" }}
      labels={{
        columnScope: "Usually includes",
        columnDuration: "Timeline",
        columnPrice: "From",
        note: "Ranges assume one decision maker and content that exists.",
      }}
    />
  );
}

Props

type EstimateRow = {
  title: string;
  scope: string;
  duration: string;
  price: string;
};

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

type Pricing70Labels = {
  columnScope?: string;
  columnDuration?: string;
  columnPrice?: string;
  note?: string;
};

Behavior notes

• The header row is hidden below md and only becomes a grid from md up, because stacked rows repeat their meaning in the copy and a floating set of column titles would read as noise on a phone.
• The headers carry no rule of their own and sit on pb-6: the first rule in the block belongs to the first data row, so the labels read as column titles rather than as another entry, and the copy never crowds the line under it.
• Header and body share the same md:grid-cols-[1.1fr_1.6fr_0.7fr_0.7fr] track list, so the columns line up without a table element or fixed widths.
• The first header cell is an empty aria-hidden span: the project name column needs the grid slot but not a label.
• price is a plain string, so a row can read €32,000, From £9k or On application without the block parsing numbers or applying a locale.
• Rows stack into title, scope, duration and price below md with a gap-8 between them, which keeps four fields legible without horizontal scrolling.
• Timeline is deliberately a range rather than a number: the block never implies a precision the estimate does not have.