Pricing, pay as you use · Klarhimmel UI

Install

npx shadcn add @klarhimmel/pricing-usage

Usage

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import PricingUsage from '@/components/klarhimmel/blocks/pricing-usage';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <PricingUsage props={{
          "eyebrow": "Pricing",
          "title": "Pay for what you send, nothing else",
          "description": "No seats, no tiers, no minimum. The first part of every month is free.",
          "ratesTitle": "Rate card",
          "rates": [
            {
              "name": "Invoices sent",
              "unit": "per invoice",
              "price": "$0.40",
              "included": "First 20 free"
            },
            {
              "name": "Payment reminders",
              "unit": "per reminder",
              "price": "$0.05",
              "included": "First 100 free"
            },
            {
              "name": "Stored documents",
              "unit": "per GB",
              "price": "$0.50",
              "included": "First 1 GB free"
            },
            {
              "name": "Accountant seats",
              "unit": "per seat",
              "price": "$0",
              "included": "Always free"
            }
          ],
          "exampleTitle": "A busy month, worked out",
          "exampleLines": [
            {
              "label": "140 invoices sent (120 billed)",
              "amount": "$48.00"
            },
            {
              "label": "600 reminders (500 billed)",
              "amount": "$25.00"
            },
            {
              "label": "3.4 GB of documents (2.4 billed)",
              "amount": "$1.20"
            }
          ],
          "totalLabel": "Total for the month",
          "total": "$74.20",
          "note": "Prices exclude VAT. We email a usage summary on the 25th, before anything is charged.",
          "cta": {
            "label": "Start free",
            "href": "#start"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

$import Block from '@/components/klarhimmel/blocks/pricing-usage';

Also called

pricing/usage

About: Usage-based pricing: a rate card (what is metered, per unit, how much is free) beside a worked example bill with line items and a total, so nobody has to do the sum. Use when there is no plan to pick.
Category: Plans and prices: tiers, a single plan, a toggle or a comparison table.

Notes

When to use it

Usage-based pricing, with a rate card on the left and a worked example bill with a total on the right, so nobody has to do the sum. Use `pricing-tiers` when buyers pick a plan instead.

Writing for it

- Each rate needs a name, a price (20 characters) and optionally a unit and an included allowance, such as '1 000 free'. - Make the example lines add up to the total, because the block does not calculate it. Two to five lines of 60 characters with amounts of 20. - Title the example by who it is, such as 'A shop with 400 orders a month', so the total is read as a case and not a promise.

Watch out for

The total and every amount are plain text, so a mistake in the sum will print as written. The rates are required to be two to six, and the cta sits under the bill in the right column only.

Pairs well with

Usage

The block in a page, with its default content (long lists shortened). Every prop is in the table below.

section.tsx

import { Theme } from '@/components/klarhimmel/theme/style';
import { BlockSurface } from '@/components/klarhimmel/blocks/surface';
import PricingUsage from '@/components/klarhimmel/blocks/pricing-usage';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <PricingUsage props={{
          "eyebrow": "Pricing",
          "title": "Pay for what you send, nothing else",
          "description": "No seats, no tiers, no minimum. The first part of every month is free.",
          "ratesTitle": "Rate card",
          "rates": [
            {
              "name": "Invoices sent",
              "unit": "per invoice",
              "price": "$0.40",
              "included": "First 20 free"
            },
            {
              "name": "Payment reminders",
              "unit": "per reminder",
              "price": "$0.05",
              "included": "First 100 free"
            }
          ],
          "exampleTitle": "A busy month, worked out",
          "exampleLines": [
            {
              "label": "140 invoices sent (120 billed)",
              "amount": "$48.00"
            },
            {
              "label": "600 reminders (500 billed)",
              "amount": "$25.00"
            }
          ],
          "totalLabel": "Total for the month",
          "total": "$74.20",
          "note": "Prices exclude VAT. We email a usage summary on the 25th, before anything is charged.",
          "cta": {
            "label": "Start free",
            "href": "#start"
          }
        }} />
      </BlockSurface>
    </Theme>
  );
}

Props

The type, default and text limit of every prop. On a real page, over-limit text is kept and checkSections flags it (Installation, Check a page before you ship); this live preview shows the default until it fits. The panel above edits all props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Pricing'`	Text, up to 60 characters.
`title`	`string`	`'Pay for what you send, nothing else'`	Text, up to 120 characters.
`description`	`string`	`'No seats, no tiers, no minimum. The…'`	Text, up to 300 characters.
`ratesTitle`	`string`	`'Rate card'`	Text, up to 60 characters.
`rates`	`{ name, unit, price, included }[]`	`4 items`	List of 2 to 6. Each item: name, unit, price, included.
`exampleTitle`	`string`	`'A busy month, worked out'`	Text, up to 60 characters.
`exampleLines`	`{ label, amount }[]`	`3 items`	List of 2 to 5. Each item: label, amount.
`totalLabel`	`string`	`'Total for the month'`	Text, up to 30 characters.
`total`	`string`	`'$74.20'`	Text, up to 20 characters.
`note`	`string`	`'Prices exclude VAT. We email a usag…'`	Text, up to 160 characters.
`cta`	`Link`	`{…}`	See the type.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.