Plan Card

Commerce · PlanCard

Pricing tier for plan pages and upgrade dialogs. Wrap several in .tf-plans for an even grid.

Props: name, text, price (number, 0 = "Free", null = "Let’s talk"), was (struck price, e.g. monthly vs yearly), per, features (strings; prefix "-" for not included), featured (dark card + flag), flag, current (disables the button), disabled (disables the button, e.g. while a checkout starts or when the plan is not available), cta, onPick.

One featured plan, the one most customers should pick. It inverts to the frame color.
List the same features in the same order on every card, so rows can be compared; mark missing ones instead of leaving them out.
Pair with a Segmented Monthly / Yearly switch that states the saving.

PreviewCode

StarterFor small teams getting organised

€9per seat / month, billed yearly~~€12~~

3 projects
1 agent · Haiku only
Shop with up to 50 products
Approvals and audit log
SSO

Props

PlanCard

Prop	Type	Notes
`name`	`string`	Required
`text?`	`string`
`price`	`number \| null \| ReactNode`	A number is formatted as money (0 = "Free", null = "Let's talk"); any other node is shown as it is, e.g. a placeholder ("—") or a price the app formatted itself.
`pricePrefix?`	`ReactNode`	Before the price, e.g. "from".
`priceNote?`	`ReactNode`	Under the price: net or gross, billed yearly, VAT note …
`was?`	`number`
`per?`	`string`
`features?`	`string[]`
`featured?`	`boolean`
`flag?`	`string`
`current?`	`boolean`
`cta?`	`string`
`disabled?`	`boolean`	Disable the button, e.g. while a checkout starts or when the plan cannot be picked.
`onPick?`	`() => void`
`href?`	`string`	The action as a link (checkout or sign-up page), with `linkAs` for a router's link.
`linkAs?`	`ElementType`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.