No pude encontrar nada, incluso en bit.dev , así que armé un componente de plantilla rápido que creo que hace parte del trabajo pesado de lo que está tratando de hacer. Aquí hay una captura de pantalla de ejemplo.

Aquí está CodeSandbox y la fuente del componente.

 function Progress({ steps = [0, 5, 10, 20], width = 300, value = Math.min(steps ?? []) ?? 0 }) { const filledAmount = (index) => { return Math.max( Math.min( (100 * (value - steps[index])) / (steps[index + 1] - steps[index]), 100 ), 0 ); }; const amountComplete = (100 * value) / (steps[steps.length - 1] - steps[0]); return ( <div className="progress-container" style={width ? { width } : {}}> <div className="progress-top-row"> <p className="progress-text" style={{ marginLeft: `${amountComplete}%`, transform: "translateX(-50%)" }} > {value} </p> </div> <div className="progress-middle-row" style={width ? { width: width } : {}} > {[...steps].slice(1).map((s, i) => ( <div key={s} className="bar-slice"> <div className="filled-slice" style={{ width: `${filledAmount(i)}%` }} ></div> </div> ))} </div> <div className="progress-bottom-row"> {steps.map((s) => ( <div key={s} className="progress-label"> <p>{s}</p> </div> ))} </div> </div> ); }

Definitivamente hay algunas áreas para refinar de acuerdo con sus estándares de codificación (y dedicando más tiempo que yo) y su estado final deseado. Espero que funcione bien para lo que estás tratando de lograr.