Services With Published Starting Prices

Agency25: Services With Published Starting Prices

A hairline service list that puts the starting price on the page, each row carrying the engagement name with its duration underneath, one line of scope, and the figure aligned right.

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

Base UI flavor

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

This installs the block to components/beste/block/agency25.tsx and the badge6 component it uses for the eyebrow (installed to components/beste/component/badge6.tsx).

Quick start

The installed file exports agency25Demo alongside the block: the exact props behind the preview above. Spread it to get a working service list in one line.

import { Agency25, agency25Demo } from "@/components/beste/block/agency25";

export default function ServicesPage() {
  return <Agency25 {...agency25Demo} />;
}

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

import { Agency25 } from "@/components/beste/block/agency25";

export default function ServicesPage() {
  return (
    <Agency25
      eyebrow="What we take on"
      heading="Four kinds of work, priced in the open"
      description="These are starting prices, not estimates."
      services={[
        {
          name: "Brand foundations",
          description: "Positioning, name, voice and an identity one person can hold.",
          duration: "6 to 8 weeks",
          price: "From £24,000",
          href: "/services/brand",
        },
      ]}
      note="We take on six projects a year."
    />
  );
}

Props

type ServiceRow = {
  name: string;
  description: string;
  duration: string;
  price: string;
  href: string;
};

Behavior notes

• price is a string, so it can read "From £24,000" or "£3,200 a month" without the block formatting a currency or picking a locale.
• It is set in tabular-nums and aligned right from md up, so figures of different lengths still line up down the column.
• Each row is a whole Link and the engagement name moves to the accent colour on hover.
• The duration sits under the name rather than in its own column, which keeps the row to three parts on a wide screen and two readable stacks on a phone.