Atelier UI

搜索组件…

搜索组件…

Stat Card

带迷你走势图和涨跌标记的数据指标卡片。

在沙盒中编辑

复制一段给 AI 编程工具的提示词,包含源码、依赖和用法

属性

StatCardProps

同时支持以下类型的全部属性: React.ComponentProps<"div">

属性类型默认值说明
label* 必填string——
value* 必填string——
change* 必填number—Percentage change vs. the previous period, e.g. 12.5 or -3.2
captionstring——
data* 必填number[]—Sparkline data points, oldest first
invertTrendbooleanfalseWhen true, a negative change is shown as good (e.g. churn, latency)

安装

$ npx shadcn@latest add https://chromotion.dev/r/stat-card.json

命令行安装的是基础组件,定制的参数写在「定制」标签页生成的代码里。

同类组件