Getting Started
Foundations
Components
#Installation
npx @dinachi/cli@latest add meter#Usage
tsx
import { Meter, MeterTrack, MeterIndicator, MeterLabel, MeterValue } from "@/components/ui/meter"#Examples
Default Meter
A basic meter gauge
Meter with Label
Meter with descriptive label and value
Storage Used72%
Meter Levels
Meters showing different severity levels with colors
CPU Usage25%
Memory65%
Disk Space90%
#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | The current measured value. |
| min | number | 0 | The minimum value of the measurement range. |
| max | number | 100 | The maximum value of the measurement range. |
| MeterValue.children | React.ReactNode | — | Optional custom rendered textual value. |