Segment Gauge React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import SegmentGauge from "./SegmentGauge";

export default function Example() {
  return (
    <SegmentGauge
      value={72}
      min={0}
      max={100}
      segments={36}
      label={"Capacity"}
      unit={"%"}
      color={"#d5b37e"}
      trackColor={"#3a352d"}
      size={260}
    />
  );
}

Using Segment Gauge

Pass a bounded measurement through value, min and max. The gauge exposes native meter semantics and clamps the displayed value to the supplied range.

Use unit for a short suffix or formatValue for a custom display. Segment colour transitions respond to value changes and are disabled under reduced motion.

Props

Name	Type	Required	Default	Description
value	number	No	0	Current measurement.
min	number	No	0	Lower bound.
max	number	No	100	Upper bound.
segments	number	No	36	Number of radial marks, from 8 to 80.
label	string	No	"Progress"	Visible and accessible meter label.
unit	string	No	""	Visible suffix next to the value.
formatValue	function	No	undefined	Formats visible and accessible value text.
color	string	No	"#d5b37e"	Active segment colour.
trackColor	string	No	"#3a352d"	Inactive segment colour.
size	number	No	240	Width in pixels, constrained by the container.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.