A graphical display of a numeric value within a range.
import {
Meter,
MeterIndicator,
MeterLabel,
MeterTrack,
MeterValue,
} from "@/components/ui/meter";
export default function Particle() {
return (
<Meter value={75}>
<div className="flex items-center justify-between gap-2">
<MeterLabel>Storage usage</MeterLabel>
<MeterValue />
</div>
<MeterTrack>
<MeterIndicator />
</MeterTrack>
</Meter>
);
}
pnpm dlx cnippet@latest add meter
import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter"<Meter value={40}>
<MeterLabel>Progress</MeterLabel>
<MeterValue />
</Meter>