# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/agency25. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Agency](/blocks/agency)
5. /
6. Services With Published Starting Prices

# Services With Published Starting Prices[PRO](/pricing)

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.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/agency25`

## 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.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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:

tsxCopy

```
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

| Prop        | Type           | Default | Description                          |
| ----------- | -------------- | ------- | ------------------------------------ |
| eyebrow     | string         | –       | Badge6 label above the hairline rule |
| heading     | string         | –       | Section heading under the rule       |
| description | string         | –       | Supporting paragraph                 |
| services    | ServiceRow\[\] | \[\]    | One linked row per engagement        |
| note        | string         | –       | Single line under the list           |
| className   | string         | –       | Extra classes for the outer section  |

tsCopy

```
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.

## More Agency blocks

[View all Agency](/blocks/agency)

[](/block/agency23)

PRO

agency23

### Numbered Services List

A services section with an eyebrow over a hairline rule, a two-column heading, and an editorial list of monospace-numbered service rows split into title and description.

[](/block/agency22)

PRO

agency22

### Horizontal Process Timeline

A connected left-to-right sequence of numbered project phases with a ruled timeline and step dots.

[](/block/agency21)

PRO

agency21

### Capabilities Accordion

Ruled, expandable capability rows with oversized type, detail copy, and monospace tag chips.

[](/block/agency17)

PRO

agency17

### Principles Selector

Interactive principle list that swaps a detail panel with image as each is hovered.

[](/block/agency14)

PRO

agency14

### Studio Team

A studio team grid of member portraits with names and roles.

[](/block/agency20)

PRO

agency20

### Clients & Outcomes

Client logo cloud paired with measurable engagement outcomes.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.