Pricing tables and pricing cards

Plans, tiers, calculators and price lists, formatted in the visitor’s language.

11 variants

Switch category

Cards, toggle or comparison table

A pricing section decides whether a visitor signs up or leaves to compare. The components here format every price in the language of the page, so 1,290.00 in English becomes 1.290,00 in German without a line of your own code, and every plan comes from one data array.

Cards is the classic with two to four plans side by side. Monthly or yearly adds the billing toggle and shows the saving, Comparison table lists every feature per plan for products that people compare closely. Price calculator and Usage based fit APIs and services billed by volume. Price list suits practices, salons and restaurants with many single prices, Single plan and Two plans keep a simple offer simple.

Highlight exactly one plan, the one most people should take. Keep feature lists parallel so the eye can compare row by row, and name the currency once. On phones the cards stack and the comparison table turns into one list per plan, check both before you publish.

Cards

Three plans side by side, the recommended one carries a light on its border.

Open in Studio

Installv1.0.1

aiw add @ai-website/pricing

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Pricing variant="cards" currency="EUR" plans={[{ name, price, features, action, featured }]} />

Source

Monthly or yearly

A segmented switch changes the billing, each plan shows what the year saves.

Open in Studio

Installv1.0.1

aiw add @ai-website/pricing

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Pricing variant="toggle" yearlyLabel="−17 %" plans={[{ price: 29, yearlyPrice: 24, … }]} />

Source

Comparison table

Grouped rows under sticky plan heads. On phones every plan becomes its own card.

Open in Studio

Installv1.0.1

aiw add @ai-website/pricing

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Pricing variant="comparison-table" plans={…} comparison={[{ title, rows: [{ label, values: [true, "10 GB", false] }] }]} />

Source

Single plan

One offer, price and button on the left, everything included on the right.

Open in Studio

Installv1.0.1

aiw add @ai-website/pricing

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Pricing variant="single-plan" plans={[{ name, price, features, action }]} />

Source

Two plans

Free and paid next to each other, the paid plan inverted.

Open in Studio

Installv1.0.1

aiw add @ai-website/pricing

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Pricing variant="two-plans" plans={[free, { …pro, featured: true }]} />

Source

Price calculator

A slider sets the team size, volume tiers set the price per seat.

Open in Studio

Installv1.0.1

aiw add @ai-website/pricing

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Pricing variant="calculator" calculator={{ label, unit, min, max, defaultValue, tiers: [{ upTo: 10, price: 14 }], action }} />

Source

Usage based

Meters with free amounts, a base fee and a sample month as a stacked bar.

Open in Studio

Installv1.0.1

aiw add @ai-website/pricing

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Pricing variant="usage-based" usage={{ base, meters: [{ name, included, price, per }], example }} />

Source

With enterprise band

Compact plans with a wide band for large customers below.

Open in Studio

Installv1.0.1

aiw add @ai-website/pricing

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Pricing variant="enterprise-callout" plans={…} enterprise={{ title, features, action }} />

Source

Price list

Services or a menu in sections, with dotted leaders and small tags.

Open in Studio

Installv1.0.1

aiw add @ai-website/pricing

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Pricing variant="price-list" menu={[{ title, items: [{ name, description, price, tag }] }]} />

Source

Minimal

Text only, three columns between hairlines, the price as the headline.

Open in Studio

Installv1.0.1

aiw add @ai-website/pricing

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Pricing variant="minimal" plans={…} />

Source

Rows

One plan per row, features as chips, price and button at the end of the line.

Open in Studio

Installv1.0.1

aiw add @ai-website/pricing

Brings along utils, kit, button, icon, reveal, section, motion

Usage

<Pricing variant="rows" plans={…} />

Source

Details

What Pricing brings along, read from the registry and the source.

Area: Marketing
Variants: 11
Version: 1.0.1 · since 1.0.0
File: components/ui/pricing.tsx
Brings along: utilskitbutton iconrevealsectionmotion
npm packages: None
Languages: English and German, 24 texts of its own
Studio: All 11 variants editable
In collections: SaaS landing page AI product
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The PricingProps interface from components/ui/pricing.tsx, with the comments from the code.

variantoptional
PricingVariant
cardstogglecomparison-tablesingle-plantwo-planscalculatorusage-basedenterprise-calloutprice-listminimalrows
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
currencyoptional
string
ISO currency, e.g. EUR or USD. Formatting follows the visitor's language.
plansoptional
PricingPlan[]
comparisonoptional
PricingComparisonGroup[]
comparison-table: grouped rows
calculatoroptional
PricingCalculator
calculator: the slider and its tiers
usageoptional
PricingUsage
usage-based: meters, base fee and a sample month
enterpriseoptional
PricingEnterprise
enterprise-callout: the wide band under the plans
menuoptional
PricingMenuSection[]
price-list: services or a menu
yearlyLabeloptional
string
toggle: small label on the yearly option, e.g. "2 months free"
footnoteoptional
React.ReactNode
Small print under the block, e.g. "All prices plus VAT"

Built-in texts

Pricing writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 24 texts

Key	English	German
perMonth	English / month	German / Monat
monthly	English Monthly	German Monatlich
yearly	English Yearly	German Jährlich
billing	English Billing period	German Abrechnungszeitraum
billedYearly	English per month, billed yearly	German pro Monat, jährliche Zahlung
billedMonthly	English per month, billed monthly	German pro Monat, monatliche Zahlung
save	English You save {amount} a year	German Du sparst {amount} im Jahr
popular	English Most popular	German Beliebteste Wahl
included	English Included	German Enthalten
notIncluded	English Not included	German Nicht enthalten
from	English from	German ab
features	English Features	German Leistungen
whatsIncluded	English What is included	German Das ist enthalten
perUnit	English per {unit} and month	German pro {unit} und Monat
total	English Your monthly price	German Dein Monatspreis
yearlyTotal	English {amount} a year	German {amount} im Jahr
tier	English Price per {unit}	German Preis pro {unit}
upTo	English up to {n}	German bis {n}
above	English from {n}	German ab {n}
freeIncluded	English Included free	German Frei enthalten
price	English Price	German Preis
platform	English Platform	German Plattform
usage	English Usage	German Nutzung
exampleTotal	English Total	German Gesamt

Read from the source of the component.

Sets aria-current, aria-labelledby and aria-live, so screen readers announce purpose and state.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Adds text for screen readers where icons and graphics stand alone.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 11 places in the code switch motion off then.

Frequent questions

How do I install Pricing?

With aiw add @ai-website/pricing. The command puts components/ui/pricing.tsx into your project, the code is yours from then on. It brings along button, icon, reveal, section and motion. It needs no further npm packages.

Which variants does Pricing have?

11 variants, Cards, Monthly or yearly, Comparison table, Single plan, Two plans, Price calculator, Usage based, With enterprise band, Price list, Minimal and Rows. You pick one with the variant prop, for example variant="toggle".

Can I translate the texts of Pricing?

Yes. Pricing carries 24 texts of its own in English and German, such as “/ month”, “Monthly” and “Yearly”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Pricing?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Pricing with aiw_components and install it with aiw_add @ai-website/pricing. Name the variant in your prompt, for example variant="cards", and the assistant writes your content straight into the props.

Can I adjust Pricing without code?

Yes, in the Studio. All 11 variants are editable there, texts, lists and switches. The Studio writes the matching Pricing code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Pricing on a page.

Cards, toggle or comparison table

Pricing

Cards

Monthly or yearly

Comparison table

Single plan

Two plans

Price calculator

Usage based

With enterprise band

Price list

Minimal

Rows

Details

Props

Built-in texts

Accessibility

Motion

Part of these collections

Part of these collections

Frequent questions

Similar components, Often combined with

Similar components

Often combined with