@cdr-kit/react-ui/DX primitives/CdrProgress

<CdrProgress>

Determinate progress bar with a primary→signal gradient fill. Pass a value 0–100, or pass {collected, threshold} and the component derives it.
import { CdrProgress } from "@cdr-kit/react-ui"

Live preview

import { CdrProgress } from "@cdr-kit/react-ui";

<CdrProgress value={64} />
<CdrProgress collected={6} threshold={10} />

Props

PropTypeDefaultDescription
valuenumber0–100 percentage. Takes precedence over collected/threshold.
collectednumberNumerator — used when value isn't provided.
thresholdnumberDenominator — used when value isn't provided.