价目表区块
清晰展示各套餐的价目表。 即用的 React UI 区块，新粗野主义风格——英雄区、定价、登录注册、仪表盘等。可预览任意屏幕尺寸，复制代码，或通过我们的 MCP 服务器用 AI 代理安装。兼容 Radix UI、Base UI 和 React Aria。
- Hero、定价与登录
- 预览每个断点
- 复制源代码
- MCP 已准备好安装
- Radix · Base UI · React Aria
- 158 现成砌块
- 已发布的页面部分
- 仪表盘与营销
- Pro 解锁密码
- 即用型布局
浏览每个布局
价目表
11 个区块 — 点击任何卡片查看全屏预览、代码和安装步骤。
- 01Pro
彩色分级定价表
三档套餐各配一条专属色带，配月付年付切换和内嵌功能面板。React 与 Tailwind 打造，可按套餐自行更换色带颜色。
- 02Pro
邮箱收集拼盘式定价区
半个区块留给免费试用邮箱收集面板，旁边是两张精简套餐卡片，铺在品牌色画布上。React 与 Tailwind 打造，接好表单即可用。
- 03Pro
功能对比表
用真实的HTML表格,将四种套餐与九项功能逐一对照,每格填入数值、勾号或叉号。基于React与Tailwind,增加一行只需补上key。
- 04Pro
四列定价表
内部分隔线把四个套餐连成一整块边框石板,推荐套餐从顶部凸出。基于React与Tailwind,只需标记一个套餐。
- 05Pro
试用后选套餐面板
定价页之后的一步:两个套餐以单选组形式呈现在品牌色面板上,下方是计费细则。基于React与Tailwind,可直接嵌入结账流程。
- 06Pro
插画风格定价卡片
每个套餐都以一幅宽幅插画开场,说明它适合谁,推荐套餐从整行中凸起。基于React与Tailwind,可换上自己的画作。
- 07Pro
关键功能定价卡片
卡片把套餐限额与关键功能拆开列出,置于反色深色板块上,配可滑动的年付切换开关。基于React与Tailwind,需同时设置两个价格字段。
- 08Pro
月付年付切换定价
一个开关即可将所有价格切换为十个月的年付价,配反色价格表头与对角丝带。基于React与Tailwind,请核对计算是否正确。
- 09Pro
模板购买与定制开发定价
区分买还是委托,而非选档位:固定价格的模板卡片对上起价定制开发卡片。基于React与Tailwind,预约通话即可对接。
- 10Pro
三档定价加常见问题
中间是填色带丝带的Pro卡片,下方是解答定价疑虑的四条常见问题面板。基于React与Tailwind,编辑faqs数组即可。
- 11Pro
两套餐定价对比
恰好两个套餐,共用一个分段计费切换开关,Pro卡片置于强调色背景上以吸引视线。基于React与Tailwind,重命名档位即可。