# 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/pricing74. 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. [Pricing](/blocks/pricing)
5. /
6. Engagement Shapes With Exclusions

# Engagement Shapes With Exclusions[PRO](/pricing)

Three engagement columns on hairlines, each stating its figure and cadence and then listing what the price covers directly against what it deliberately does not.

ViewCodeDocs

Base UI

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

## Pricing74: Engagement Shapes With Exclusions

Three engagement columns on hairlines, each stating its figure and cadence and then listing what the price covers directly against what it deliberately does not.

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/pricing74.tsx`, the `badge6` component used for the eyebrow and the `button1` seal button under the columns.

### Quick start

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

tsxCopy

```
import { Pricing74, pricing74Demo } from "@/components/beste/block/pricing74";

export default function PricingPage() {
  return <Pricing74 {...pricing74Demo} />;
}
```

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

tsxCopy

```
import { Pricing74 } from "@/components/beste/block/pricing74";

export default function PricingPage() {
  return (
    <Pricing74
      eyebrow="Ways to work together"
      heading="Three shapes, and what each one is not"
      includedLabel="What it covers"
      excludedLabel="What it does not"
      shapes={[
        {
          name: "Project",
          price: "From £24,000",
          cadence: "Fixed price, fixed scope",
          summary: "A defined piece of work with a start and an end.",
          included: ["A named team for the whole run", "Weekly written updates"],
          excluded: ["Work added after the scope is signed"],
        },
      ]}
      button={{ label: "Start a conversation", href: "/contact" }}
      note="Prices are the same whoever is asking."
    />
  );
}
```

### Props

| Prop          | Type         | Default | Description                                 |
| ------------- | ------------ | ------- | ------------------------------------------- |
| eyebrow       | string       | –       | Badge6 label above the hairline rule        |
| heading       | string       | –       | Section heading under the rule              |
| includedLabel | string       | –       | Label over the covered list in every column |
| excludedLabel | string       | –       | Label over the excluded list                |
| shapes        | Shape\[\]    | \[\]    | One column per engagement shape             |
| button        | ActionButton | –       | Seal button under the columns               |
| note          | string       | –       | Line beside the button                      |
| className     | string       | –       | Extra classes for the outer section         |

tsCopy

```
type Shape = {
  name: string;
  price: string;
  cadence: string;
  summary: string;
  included: string[];
  excluded: string[];
};

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

### Behavior notes

* Every column carries both lists. The exclusions are the point of the block, so they are not an optional extra that can be quietly dropped.
* Included items take an accent check and excluded items a muted cross, which is the only colour difference between the two lists.
* Columns sit on hairlines rather than in cards, and none of them is marked as recommended, so the page does not steer the choice.
* `price` and `cadence` are free text, so a column can be a one-off figure, a monthly rate or an hourly one without a billing toggle.

## More Pricing blocks

[View all Pricing](/blocks/pricing)

[](/block/pricing69)

PRO

pricing69

### Engagement Tier Rails

Boxless pricing where each tier is a ruled column: the name, an oversized figure with its period, a fit line, an inclusion list under a second rule and a pill CTA, with subgrid keeping every internal rule aligned across the three columns.

[](/block/pricing65)

PRO

pricing65

### Monochrome Pricing Tiers

Three monochrome engagement tiers with editorial big-number pricing and an inverted featured plan.

[](/block/pricing60)

PRO

pricing60

### Three Tiers

Three pricing tiers with an emphasized popular plan and feature lists.

[](/block/pricing72)

PRO

pricing72

### Single Plan With Full Inclusion List

A one-plan pricing panel that sets an oversized light figure and two actions beside an image tile floating a live savings card, then lists everything included as three hairline groups below.

[](/block/pricing63)

PRO

pricing63

### Two Engagement Plans

Two large contrasting plan panels (light vs dark) for engagement models.

[](/block/pricing61)

PRO

pricing61

### Billing Toggle Pricing

Three plans with a monthly/yearly billing toggle and feature lists.

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