Meter

Shows a measured value within a known range.

Storage used65 GB of 100 GB

meter-basic-demo.tsx

"use client";import { Meter } from "@/components/vip-ui/meter";export function MeterBasicDemo() {  return (    <Meter      label="Storage used"      value={65}      valueLabel="65 GB of 100 GB"      className="w-full max-w-sm"    />  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-meter.json

Value label

Screen readers read valueLabel as the value.

Storage used65 GB of 100 GB

Adjust usage65 GB

meter-demo.tsx

"use client";import { useState } from "react";import { Meter } from "@/components/vip-ui/meter";import { Slider } from "@/components/vip-ui/slider";export function MeterDemo() {  const [value, setValue] = useState(65);  return (    <div className="grid w-full max-w-sm gap-5">      <Meter        label="Storage used"        value={value}        valueLabel={`${value} GB of 100 GB`}      />      <Slider        label="Adjust usage"        value={value}        formatOptions={{ style: "unit", unit: "gigabyte" }}        onChange={(next) => setValue(Number(next))}      />    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Meter (opens in a new tab).

label: string: Shows a visible label above the meter. Without label, pass aria-label.