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), 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.
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
Most popular
TeamEverything a growing company runs on
€24per seat / month, billed yearly€29
- Unlimited projects
- 10 agents · all models
- Unlimited products, 3 channels
- Approvals and audit log
- SSO
BusinessSecurity, control and an SLA
Let’s talk
- Everything in Team
- SSO and SCIM
- EU data residency
- 99.9% uptime SLA
Props
PlanCard
| Prop | Type | Notes |
|---|---|---|
name | string | Required |
text? | string | |
price | number | null | Required |
was? | number | |
per? | string | |
features? | string[] | |
featured? | boolean | |
flag? | string | |
current? | boolean | |
cta? | string | |
onPick? | () => void | |
className? | string | Extra class on the root element. |
style? | CSSProperties | Inline style on the root element. |