Pricing, single plan · Klarhimmel UI

Install

npx shadcn add @klarhimmel/pricing-single

Usage

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <PricingSingle props={{
          "eyebrow": "Pricing",
          "title": "One plan, everything included",
          "description": "No tiers to compare and no features held back. Pay for the people on your team and nothing else.",
          "name": "Northlight Team",
          "price": "$12",
          "period": "per person, per month",
          "includesTitle": "What is included",
          "features": [
            "Unlimited projects",
            "Workload planning",
            "Review and approvals",
            "Unlimited history",
            "Client review links",
            "Weekly summaries",
            "Priority support",
            "Export at any time"
          ],
          "cta": {
            "label": "Start free trial",
            "href": "#trial"
          },
          "note": "14 days free. No card required."
        }} />
      </BlockSurface>
    </Theme>
  );
}

Install

Import

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

Also called

pricing/single

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

Notes

When to use it

One plan with a large price, a button and a checklist of what is included. If you have more than one option choose `pricing-tiers`, and for work priced by use `pricing-usage`.

Writing for it

- Price is limited to 16 characters, so '299 kr' fits, and the period (40 characters) after it says 'per month, billed yearly' or similar. - The checklist takes one to ten items of 80 characters. Lead with what the buyer gets and not the plan's internal name for it. - The note under the button (120 characters) is for the objection that stops a click, like a cancellation term or a trial.

Watch out for

There is no featured or badge field because the single card is always the emphasised box. The includes title (60 characters) is a real h3, so empty it only if you accept a checklist with no heading.

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

export default function Section() {
  return (
    <Theme theme="brand">
      <BlockSurface>
        <PricingSingle props={{
          "eyebrow": "Pricing",
          "title": "One plan, everything included",
          "description": "No tiers to compare and no features held back. Pay for the people on your team and nothing else.",
          "name": "Northlight Team",
          "price": "$12",
          "period": "per person, per month",
          "includesTitle": "What is included",
          "features": [
            "Unlimited projects",
            "Workload planning",
            "Review and approvals",
            "Unlimited history",
            "Client review links",
            "Weekly summaries",
            "Priority support",
            "Export at any time"
          ],
          "cta": {
            "label": "Start free trial",
            "href": "#trial"
          },
          "note": "14 days free. No card required."
        }} />
      </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`	`'One plan, everything included'`	Text, up to 120 characters.
`description`	`string`	`'No tiers to compare and no features…'`	Text, up to 300 characters.
`name`	`string`	`'Northlight Team'`	Text, up to 40 characters.
`price`	`string`	`'$12'`	Text, up to 16 characters.
`period`	`string`	`'per person, per month'`	Text, up to 40 characters.
`includesTitle`	`string`	`'What is included'`	Text, up to 60 characters.
`features`	`string[]`	`8 items`	List of 1 to 10.
`cta`	`Link`	`{…}`	See the type.
`note`	`string`	`'14 days free. No card required.'`	Text, up to 120 characters.
`headingLevel`	`'1' \| '2'`	`-`	One of '1', '2'. Optional; empty is not rendered.