分档定价 <PricingTiers />

3–4 张价格卡，推荐档是深色卡片并略微抬高，带角标；每档有价格、适用对象和 3–5 条功能，底部一行说明价值指标。

Template and style descriptions are currently available in Chinese only.

Group: 定价 · 好 / 更好 / 最好
Component: PricingTiers · #pricing-tiers
Interaction: 卡片依次上浮；悬停时抬起。

Good for

产品分档与定价方案
想把大多数客户引到某一档

Avoid when

在比较竞品价格：用 Matrix
只有一档：用 BigStat

Content limits

1	tiers 3 或 4 档，从便宜到贵
2	name ≤ 6 个字符；price ≤ 6 个字符；unit ≤ 10 个字符
3	for ≤ 16 字
4	features 3–5 条，每条 ≤ 16 字；后一档第一条写“包含上一档全部功能”
5	focus 恰好 1 档；badge ≤ 6 字
6	footnote ≤ 50 字

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`tiers` · required	`{ name, price, unit?, for, features, focus?, badge? }[]`	各档
`footnote`	`string`	底部说明：价值指标与升档规则

Example

<PricingTiers
  kicker="分档定价"
  title="三档定价，把人引到中间那档"
  tiers={[
    { name: '入门', price: '¥0', unit: '/ 3 席位', for: '个人和小团队试用', features: ['3 个数据源', '标准看板模板'] },
    { name: '专业', price: '¥399', unit: '/ 席位 / 月', for: '中型企业', features: ['包含入门档全部功能', '多触点归因'], focus: true, badge: '推荐' },
    { name: '企业', price: '询价', for: '大型组织', features: ['包含专业档全部功能', '单点登录'] },
  ]}
  source="示意"
/>