Meter - Kumo

Storage used

import { Meter } from "@cloudflare/kumo";

export function MeterBasicDemo() {
  return <Meter label="Storage used" value={65} />;
}

Installation

Barrel

import { Meter } from "@cloudflare/kumo";

Granular

import { Meter } from "@cloudflare/kumo/components/meter";

Usage

import { Meter } from "@cloudflare/kumo";

export default function Example() {
  return <Meter label="Storage used" value={65} />;
}

Examples

Basic Meter

The default meter displays a label and percentage value.

Storage used

import { Meter } from "@cloudflare/kumo";

export function MeterBasicDemo() {
  return <Meter label="Storage used" value={65} />;
}

Custom Value Display

Use customValue to show a custom string instead of the percentage.

API requests750 / 1,000

import { Meter } from "@cloudflare/kumo";

export function MeterCustomValueDemo() {
  return <Meter label="API requests" value={75} customValue="750 / 1,000" />;
}

Hidden Value

Set showValue={false} to hide the value display.

Progress

import { Meter } from "@cloudflare/kumo";

export function MeterHiddenValueDemo() {
  return <Meter label="Progress" value={40} showValue={false} />;
}

Full Meter

A meter at 100% capacity.

Quota reached

import { Meter } from "@cloudflare/kumo";

export function MeterFullDemo() {
  return <Meter label="Quota reached" value={100} />;
}

Low Value

A meter with a low value.

Memory usage

import { Meter } from "@cloudflare/kumo";

export function MeterLowDemo() {
  return <Meter label="Memory usage" value={15} />;
}

API Reference

Prop	Type	Default	Description
customValue	`string`	-	Custom formatted value text (e.g. "750 / 1,000") displayed instead of percentage.
label*	`string`	-	Label text displayed above the meter track.
showValue	`boolean`	-	Whether to display the percentage value next to the label.
trackClassName	`string`	-	Additional CSS classes for the track (background bar).
indicatorClassName	`string`	-	Additional CSS classes for the indicator (filled bar).
value	`number`	-	Current value of the meter
max	`number`	-	Maximum value of the meter (default: 100)
min	`number`	-	Minimum value of the meter (default: 0)