数据统计区块
展示统计与指标的组件。 即用的 React UI 区块,新粗野主义风格——英雄区、定价、登录注册、仪表盘等。可预览任意屏幕尺寸,复制代码,或通过我们的 MCP 服务器用 AI 代理安装。兼容 Radix UI、Base UI 和 React Aria。
- Hero、定价与登录
- 预览每个断点
- 复制源代码
- MCP 已准备好安装
- Radix · Base UI · React Aria
- 158 现成砌块
- 已发布的页面部分
- 仪表盘与营销
- Pro 解锁密码
- 即用型布局
浏览每个布局
数据统计
9 个区块 — 点击任何卡片查看全屏预览、代码和安装步骤。
- 01Pro

面积图统计区块
七天销售与成本面积图和累计总额、涨跌幅徽章共处一卡,下方还有四项数据。基于 React 与 Tailwind:只需替换趋势数组。
- 02Pro

Bento 风格统计看板
两张窄幅增长卡片各自带下钻链接,旁边是承载核心数字的双倍宽度品牌色卡片。基于 React 与 Tailwind:把链接指向你的报表页面。
- 03Pro

紧凑图标统计行
这套区块里最短的统计条:四张卡片,各是一个图标块搭配数字和两个字的标签。基于 React 与 Tailwind:可以放在你的主视觉区块下方。
- 04Pro

分隔式统计面板
通栏满版色带,三项数字共处一个由两像素分隔线切开的面板中。基于 React 与 Tailwind:改好文案,插入两个区块之间即可。
- 05Pro

环形图统计看板
满意度环形图,分数直接写在圆环中心,两侧是黑白交替的四张卡片。基于 React 与 Tailwind:只需在一个数组里修改比例。
- 06Pro

带 CTA 的统计马赛克
一侧是卖点,一侧是证据:标题和两个按钮,配一组高低错落的马赛克方块。基于 React 与 Tailwind:按需重新平衡各方块。
- 07Pro

带趋势箭头的统计区块
每张卡片都把一个圆形趋势箭头和一句相对去年的文字变化固定在同一条基线上。基于 React 与 Tailwind:为每一项设置涨或跌。
- 08Pro

店铺指标看板
顶部的日/周/月/年切换器驱动四张 KPI 卡片切换,下方是营收占比与热门商品榜单。基于 React 与 Tailwind:接入你自己的 figures 数据对象即可。
- 09Pro

高亮统计卡片
模糊纹理背景上的三张指标卡片,恰好一张填充品牌色,让视线自动锁定重点。基于 React 与 Tailwind:移动 highlight 标记即可。