Pricing, three tiers · Klarhimmel UI

Install

npx shadcn add @klarhimmel/pricing-tiers

Usage

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <PricingTiers props={{
          "eyebrow": "Pricing",
          "title": "Simple plans that grow with your team",
          "description": "Start free. Upgrade when you need more people, more projects or more history.",
          "tiers": [
            {
              "name": "Starter",
              "price": "$0",
              "period": "per month",
              "description": "For individuals and tiny teams getting started.",
              "features": [
                "Up to 3 projects",
                "2 team members",
                "30 days of history",
                "Community support"
              ],
              "cta": {
                "label": "Start for free",
                "href": "#start"
              },
              "featured": false
            },
            {
              "name": "Team",
              "price": "$12",
              "period": "per person, per month",
              "description": "For growing teams that plan and review together.",
              "features": [
                "Unlimited projects",
                "Workload planning",
                "Review and approvals",
                "Unlimited history",
                "Priority support"
              ],
              "cta": {
                "label": "Start free trial",
                "href": "#trial"
              },
              "featured": true
            },
            {
              "name": "Business",
              "price": "$24",
              "period": "per person, per month",
              "description": "For organisations with security and control needs.",
              "features": [
                "Everything in Team",
                "Single sign-on",
                "Audit log",
                "Custom roles",
                "Dedicated success manager"
              ],
              "cta": {
                "label": "Talk to sales",
                "href": "#sales"
              },
              "featured": false
            }
          ]
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

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

Also called

pricing/tiers

Category: Plans and prices: tiers, a single plan, a toggle or a comparison table.

Notes

When to use it

Up to three plans side by side with a price, a feature list and a button, one of which can be featured. Use `pricing-toggle` if buyers should switch between monthly and yearly prices, and `pricing-rows` when there are four plans.

Writing for it

- Each tier has a price of up to 16 characters and a period of 24. Put the currency in the price and a plain 'per month' in the period. - Feature lists hold up to eight lines of 80 characters. Keep the same features in the same order across the tiers so they can be compared by eye. - The tier description (120 characters) has a reserved two-line height. Fill it in on every tier so the prices line up.

Watch out for

The three columns appear only on wide containers, and one or two tiers still occupy their own third of the row. The featured flag changes the border and the button style but not the size, so do not rely on it alone to point to a plan.

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 PricingTiers from '@/components/klarhimmel/blocks/pricing-tiers';

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <PricingTiers props={{
          "eyebrow": "Pricing",
          "title": "Simple plans that grow with your team",
          "description": "Start free. Upgrade when you need more people, more projects or more history.",
          "tiers": [
            {
              "name": "Starter",
              "price": "$0",
              "period": "per month",
              "description": "For individuals and tiny teams getting started.",
              "features": [
                "Up to 3 projects",
                "2 team members"
              ],
              "cta": {
                "label": "Start for free",
                "href": "#start"
              },
              "featured": false
            },
            {
              "name": "Team",
              "price": "$12",
              "period": "per person, per month",
              "description": "For growing teams that plan and review together.",
              "features": [
                "Unlimited projects",
                "Workload planning"
              ],
              "cta": {
                "label": "Start free trial",
                "href": "#trial"
              },
              "featured": true
            }
          ]
        }} />
      </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`	`'Simple plans that grow with your te…'`	Text, up to 120 characters.
`description`	`string`	`'Start free. Upgrade when you need m…'`	Text, up to 300 characters.
`tiers`	`{ name, price, period, description, features, cta, featured }[]`	`3 items`	List of 1 to 3. Each item: name, price, period, description, features, cta, featured.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.