Pricing, plan rows · Klarhimmel UI

Install

npx shadcn add @klarhimmel/pricing-rows

Usage

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <PricingRows props={{
          "eyebrow": "Plans",
          "title": "Pick the room that fits your week",
          "description": "Every plan includes your own booking page, the calendar and email support.",
          "plans": [
            {
              "name": "Guesthouse",
              "description": "Up to 8 rooms, one property.",
              "highlights": [
                "8 rooms",
                "1 property",
                "Email support"
              ],
              "price": "$19",
              "period": "per month",
              "cta": {
                "label": "Start free",
                "href": "#start"
              },
              "featured": false
            },
            {
              "name": "Hotel",
              "description": "Up to 40 rooms with channel sync and reports.",
              "highlights": [
                "40 rooms",
                "Channel sync",
                "Reports"
              ],
              "price": "$49",
              "period": "per month",
              "cta": {
                "label": "Start free",
                "href": "#start"
              },
              "featured": true
            },
            {
              "name": "Group",
              "description": "Several properties, one login, one invoice.",
              "highlights": [
                "Unlimited rooms",
                "Roles",
                "Phone support"
              ],
              "price": "$129",
              "period": "per month",
              "cta": {
                "label": "Talk to us",
                "href": "#contact"
              },
              "featured": false
            }
          ],
          "note": "Prices exclude VAT. Yearly billing is two months free."
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

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

Also called

pricing/rows

About: Plans as full-width rows instead of cards: name and description, up to three highlights as chips, the price, and a button on one line. Easy to scan down, and room for four or more plans. One row can be marked featured.
Category: Plans and prices: tiers, a single plan, a toggle or a comparison table.

Notes

When to use it

Plans as full-width rows with name, up to three chips, price and a button on one line, scannable from top to bottom. Use it for four plans or more; `pricing-tiers` suits three cards side by side.

Writing for it

- Highlights hold 40 characters each and at most three per plan. They become chips, so write facts like '10 seats' and not sentences. - Price is required at 16 characters, and the period (30 characters) goes after it. Use the period for 'per month' or 'one time'. - Mark one plan as featured. Its row gets the accent look and a primary button, while the others use a secondary one.

Watch out for

Several plans can technically be flagged featured, and each gets the accent styling, so the emphasis stops meaning anything. The note under the list holds 160 characters and applies to all rows, such as tax or billing terms.

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <PricingRows props={{
          "eyebrow": "Plans",
          "title": "Pick the room that fits your week",
          "description": "Every plan includes your own booking page, the calendar and email support.",
          "plans": [
            {
              "name": "Guesthouse",
              "description": "Up to 8 rooms, one property.",
              "highlights": [
                "8 rooms",
                "1 property"
              ],
              "price": "$19",
              "period": "per month",
              "cta": {
                "label": "Start free",
                "href": "#start"
              },
              "featured": false
            },
            {
              "name": "Hotel",
              "description": "Up to 40 rooms with channel sync and reports.",
              "highlights": [
                "40 rooms",
                "Channel sync"
              ],
              "price": "$49",
              "period": "per month",
              "cta": {
                "label": "Start free",
                "href": "#start"
              },
              "featured": true
            }
          ],
          "note": "Prices exclude VAT. Yearly billing is two months free."
        }} />
      </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`	`'Plans'`	Text, up to 60 characters.
`title`	`string`	`'Pick the room that fits your week'`	Text, up to 120 characters.
`description`	`string`	`'Every plan includes your own bookin…'`	Text, up to 300 characters.
`plans`	`{ name, description, highlights, price, period, cta, featured }[]`	`3 items`	List of 2 to 4. Each item: name, description, highlights, price, period, cta, featured.
`note`	`string`	`'Prices exclude VAT. Yearly billing …'`	Text, up to 160 characters.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.