Stacked Progress 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 StackedProgress from "./StackedProgress";

export default function Example() {
  return (
    <StackedProgress
      items={[
        {
          "id": "design",
          "label": "Design",
          "value": 42,
          "color": "#c1a6d6"
        },
        {
          "id": "build",
          "label": "Build",
          "value": 28,
          "color": "#7e9aa8"
        },
        {
          "id": "review",
          "label": "Review",
          "value": 16,
          "color": "#d7ae85"
        }
      ]}
      total={100}
      label={"Project allocation"}
      valueLabel={"86 / 100"}
      height={42}
      gap={6}
      background={"#29222e"}
      showLegend={true}
    />
  );
}

Using Stacked Progress

Pass the segment values through items and set total for the scale they share. Use label and valueLabel to explain the displayed measure.

showLegend determines whether the segment names appear beneath the bar. Use onSegmentClick only when selecting a segment has a useful action.

Props

Name	Type	Required	Default	Description
items	object[]	No	[]	Array of { id?, label, value, color? }. Negative and nonnumeric values occupy no width.
total	number	No	undefined	Capacity; values larger than capacity expand the capacity to their sum.
label	string	No	""	Optional visible heading and group label.
valueLabel	string	No	""	Optional caller-formatted value shown beside the heading.
height	number \| string	No	38	Bar height in pixels.
gap	number	No	5	Gap between segments in pixels.
background	string	No	"#27222c"	Unused capacity colour.
showLegend	boolean	No	true	Show item labels and raw values beneath the bar.
onSegmentClick	function	No	undefined	Optional callback (item, index); providing it makes each positive segment a keyboard-accessible button.
className	string	No	""	Additional CSS classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for sizing, typography, and visual overrides.