Klarhimmel UI

Pricing prompt

Plans and prices as tiers, a toggle, one plan or a comparison table.

Prompt

Prompt

Use the klarhimmel-design skill. Build the pricing section for {product}: {plans} in {currency}. Install: npx shadcn add @klarhimmel/pricing-tiers @klarhimmel/pricing-toggle @klarhimmel/pricing-single @klarhimmel/pricing-comparison (remove what you do not use) Pick: - pricing-tiers: up to 3 plans side by side; mark one featured - pricing-toggle: monthly and yearly switch - pricing-single: one plan with a checklist - pricing-comparison: feature-by-plan table, 2 to 4 plans Props: tiers with name, price (text, with currency), period and a feature list (≤8 lines); exactly one has featured: true. In comparison rows, cells are "yes", "no" or short text. Copy: Prices carry their VAT basis. Feature lines name what the plan includes, not adjectives. Same words for the same feature in every tier. Accessibility: The toggle is a labelled control that announces the period. The table has real headers. Price and period read together. Never: viewport variants (md:, lg:), style=, text or images outside Text and Media, fields the schema lacks. Shorten copy to fit the limits. Done when: one featured plan; prices show currency and VAT basis; tier lists are parallel; toggle changes every price.

Variables

VariableWhat to fill inExample
{product}What you sell, in a few wordsRoom booking for small hotels
{plans}Plan namesStart, Grow, Group
{currency}Currency and VAT basisSEK excl. VAT

A good result

One featured plan. Prices show currency and VAT basis. Tier lists are parallel.

checklist.md
- [ ] one featured plan
- [ ] prices show currency and VAT basis
- [ ] tier lists are parallel
- [ ] toggle changes every price