组件
Data Display 指标与定义
让数值和解释在密集界面中保持可读、可比较。
MetricStrip 用于一组关键指标，DescriptionList 用于字段与值的对应信息。两者使用原生 dl、dt、dd 语义；数值格式、单位与缺失状态由调用方提供。
安装
pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/data-display.json首次使用请先完成 Registry 与主题接入。
组合与状态
指标使用明显数值和轻量说明，不把所有数据都提升为大数字。定义列表支持备注和长值自然换行，可嵌入 Badge、链接或可复制文本，但应保持单位和含义清楚。
Props
| API / 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
MetricStrip.items | readonly MetricItem[] | 必填 | 有序指标 |
MetricItem.id | string | 使用 label | 动态内容推荐稳定 id |
MetricItem.label / value | string / ReactNode | 必填 | 名称与已格式化值 |
MetricItem.description | ReactNode | — | 统计范围或解释 |
DescriptionList.items | readonly DescriptionItem[] | 必填 | 定义项 |
DescriptionItem.label / value | ReactNode | 必填 | 名称与内容 |
DescriptionItem.note | ReactNode | — | 字段说明 |
DescriptionItem.id | string | 数组索引 | 列表变化时传稳定 id |
| 容器其他属性 | 原生 dl 属性 | — | className、aria 等 |
键盘与约束
静态指标不聚焦，内部链接和按钮保留各自语义。数量变化不默认实时播报；确需播报时在恰当父区域设置 status，避免每个数字都打断读屏。
避免这样使用
不要在组件内部猜测 locale 或货币；不要把缺失值显示成零；不要用颜色单独表达增长、下降或异常。
来源与版本
0.1.0，来自 Subtic apps/web/components/ui/panel.tsx 的 DataPoint 与详情页的信息组织方式。将数据展示独立为领域无关契约。
查看由当前源码生成的类型参考
只展示 Kitseed 自身定义的属性，原生 HTML 与 Base UI 透传属性请参阅对应上游说明。
MetricStrip
| 属性 | 类型 | 默认值 |
|---|---|---|
items | readonly MetricItem[] | — |
unstyled? | boolean | false |
descriptionAs? | "dd" | "p" | — |
slotProps? | {
item?: ComponentProps<"div">;
label?: ComponentProps<"dt">;
value?: ComponentProps<"dd">;
description?: ComponentProps<"p">;
} | {} |
DescriptionList
| 属性 | 类型 | 默认值 |
|---|---|---|
items | readonly DescriptionItem[] | — |