Atelier UI

搜索组件…

搜索组件…

Usage Meter

用量仪表:多段堆叠条、图例,接近或超出额度时给出提示。

在沙盒中编辑

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

属性

UsageMeterProps

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

属性类型默认值说明
title* 必填string——
segments* 必填UsageSegment[]——
limit* 必填number——
unitstring""—
warnAtnumber0.85Fraction of the limit at which the meter turns to a warning

安装

$ npx shadcn@latest add https://chromotion.dev/r/usage-meter.json

同类组件