Plan comparison

A React block (a whole screen) in Beamline's Blocks category.

Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in view while the features scroll, differences only, and included, not included and not specified told apart.

Use it for

An upgrade or pricing page where people compare plans feature by feature before choosing.

Not for

Choosing a plan inside a checkout or settings form (radio-cards).
Showing what the current plan uses (usage-meter).

Anatomy

title and description
billing period toggle (savings note)
differences-only switch
plan picker (narrow screens)
sticky plan header (name, badges, price, period line, call to action)
feature groups (group row, feature rows with an optional hint)
cell: included (check) · not included (—) · a value · not specified (hatched)

Variants

period: monthly, yearly

States

monthly / yearly (prices roll)
current plan (badge, its button says so)
recommended plan (accent edge, badge, accent button)
choosing (the plan's button busy, the others wait)
choice failed (message under the button)
differences only (equal rows hidden; nothing left says so)
quote-only plan (Talk to sales)
free plan
narrow: one plan at a time with a picker; its header spans the row (name, price and button at full width)
header stuck (hairline shadow)

Keyboard

Tab: period toggle, differences switch, plan picker (narrow), each plan's button, then each feature hint
arrow keys move within the period toggle and the plan picker
hints open on focus and close with Escape

Motion

Prices roll digit by digit when the period changes (slot text); the stuck header gains its shadow over --motion-in. Reduced motion swaps prices at once.

Props

Prop	Type	Default	Description
`plans` (required)	`PlanComparisonPlan[]`	—	id, name, description, price { monthly, yearly } per unit per month (null = quoted by sales, 0 = free), unit, cta.
`groups` (required)	`PlanFeatureGroup[]`	—	Feature groups; each feature has values per plan id: true (included), false (not included), a string or number, or null (not specified).
`period / defaultPeriod / onPeriodChange`	`"monthly" \| "yearly"`	`"yearly"`
`currentPlan`	`string`	—	The plan the account is on.
`recommendedPlan`	`string`	—
`onSelectPlan`	`(planId, period) => void \| Promise<void>`	—	A plan's button; a promise shows progress on it and a rejection shows its message.
`differencesOnly / defaultDifferencesOnly / onDifferencesOnlyChange`	`boolean`	—
`format`	`(amount: number) => string`	—	Price formatting. Default whole US dollars.
`title / description`	`ReactNode`	—
`unknownLabel`	`string`	`"Not specified"`
`stickyOffset`	`number`	`0`	Pixels from the top of the scroller where the header sticks (below your own app bar).
`className`	`string`	—
`classNames`	`PlanComparisonClassNames`	—
`style / ref`	`CSSProperties / Ref<HTMLDivElement>`	—

Built from

billing-toggle
slot-text
table
button
badge
switch
tooltip
segmented-control
empty-state

Dependencies

lucide-react, motion

Import

import { PlanComparison } from "@/blocks/plan-comparison/plan-comparison";

Get it

Plan comparison is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent