Usage meter

Show what fills an allowance and how close it is to the limit.

npx shadcn@latest add @silicon-ui/usage-meter
meterusagestorage
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/usage-meter

Manually

  1. Install the dependencies.

    npm install lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/usage-meter/usage-meter.tsx
    • components/silicon-ui/usage-meter/usage-meter.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { UsageMeter } from "@/components/silicon-ui/usage-meter/usage-meter";

API reference

PropTypeDefault
label*

What is measured, such as "Workspace storage".

string—
segments*

Used amounts in display order. Up to four read clearly.

UsageMeterSegment[]—
limit*

The plan limit, in the same unit as the segments.

number—
unitstring""
decimals

Digits after the decimal point.

number1
freeLabelstring"Free"
overLabelstring"Over limit"
warnAt

Share of the limit at which the meter warns that it is almost full.

number.9

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens