Pricing comparison

Plans compared feature by feature in groups, with hints, the popular column tinted, and actions in the header.

$ pnpm dlx shadcn@latest add @dashral/pricing-comparison

When to use

Plans compared feature by feature in groups, with hints and the popular column tinted.
Under the tiers on a pricing page, for people who read every line.

When not to use

Plans that differ in two or three ways: the tiers' own lists already say it.
The top of a pricing page: lead with Pricing tiers, and put this under them.

Usage

Pricing comparison with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { PricingComparison } from "@/components/dashral/blocks/pricing-comparison"
2
3<PricingComparison
4  plans={plans}
5  groups={featureGroups}
6  onSelect={(plan) => checkout(plan.name)}
7/>

API reference

PricingComparison

Plans compared feature by feature: a header row with each plan's price and action, groups of rows, a hint on the features that need one, and the popular plan's column tinted. Scrolls sideways on phones, the feature names staying in place. Every part comes from props.

Prop	Type	Default
`eyebrow`	`React.ReactNode`	`"Compare plans"`
`title`	`React.ReactNode`	`sample`
`plans`	`ComparePlan[]`	`sample`
`groups`	`CompareGroup[]`	`sample`
`per`	`string` After each price.	`"/ month"`
`onSelect`	`(plan: ComparePlan) => void`	—

type ComparePlan

A plan's column: its name, its price a month as shown, and its button (a link, or onSelect without one).

Prop	Type	Default
`name`	`string`	—
`price`	`string`	—
`popular`	`boolean`	—
`cta`	`string`	—
`href`	`string`	—

type CompareValue

Included (true), not (false), or what it comes with ("20").

= boolean | string

type CompareGroup

A group of rows; each row has one value per plan, in the plans' order.

Prop	Type	Default
`title`	`string`	—
`rows`	`{ feature: string; hint?: string; values: CompareValue[] }[]`	—