Single Plan With Full Inclusion List

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.

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

Base UI flavor

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

This installs the block to components/beste/block/pricing72.tsx, the money23 savings piece it floats on the tile (installed to components/beste/piece/money23.tsx), and the badge23 and button21 components it uses for the eyebrow and the actions.

Quick start

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

import { Pricing72, pricing72Demo } from "@/components/beste/block/pricing72";

export default function PricingPage() {
  return <Pricing72 {...pricing72Demo} />;
}

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

import { Money23 } from "@/components/beste/piece/money23";
import { Pricing72 } from "@/components/beste/block/pricing72";

export default function PricingPage() {
  return (
    <Pricing72
      badge={{ label: "One plan" }}
      heading="There is no tier where your audit log costs extra"
      description="We tried three tiers for a year and spent most of it explaining which one you needed."
      price="$29"
      period="per seat / month"
      priceNote="Billed monthly in arrears. Free while you are running a single clinic."
      button={{ label: "Start free", href: "/signup" }}
      secondaryButton={{ label: "Book a demo", href: "/demo" }}
      groups={[
        {
          label: "Running the day",
          items: ["Multi-site rota and rooms", "Waiting list with automatic backfill"],
        },
        {
          label: "Governance",
          items: ["Immutable audit log", "Full export whenever you ask"],
        },
      ]}
      media={
        <Money23
          label="Estimated saving"
          amount="$1,840"
          period="per month"
          delta="38% lower"
          rows={[{ label: "Four tools today", amount: "$4,820", muted: true }]}
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      footnote="Seats move up and down mid-month and we prorate both directions."
    />
  );
}

Props

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

type TileImage = {
  src: string;
  alt: string;
};

type FeatureGroup = {
  label: string;
  items: string[];
};

Behavior notes

• The two actions are separate named props rather than an array, so their tones are fixed: button is always solid and secondaryButton always outlined. That is deliberate for a single-plan block, where the hierarchy never changes.
• The inclusion groups sit inside the same bordered panel as the price, separated by a border-t. The whole offer is one object, which is the argument a single-plan page makes.
• The group row uses gap-px over a bg-border container with bg-card cells, so the dividers between groups are the background showing through rather than borders on each cell.
• Group lists close with last:border-b, so each reads as a small table rather than an open list.
• The upper row is a 1.4fr to 1fr split, giving the price and copy the wider track while the savings tile stays only as wide as the card needs.
• footnote sits outside the panel, which keeps prorating caveats reading as terms rather than as part of the offer.
• The check icons are aria-hidden and the text carries the meaning, so a screen reader hears three plain lists.