Components

Progress

A determinate progress bar with a label and a value. The fill uses the tone color and grows with a short transition.

Usage

Use it for:

  • Budgets, quotas, uploads, onboarding steps.
  • Anything with a known total.

Avoid it when:

  • The duration is unknown: use Spinner.
  • Several values make up a whole: use a DonutChart or a stacked BarChart.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Examples

Budgets

Tone by state: on track, close to the limit, over budget. valueText shows (and announces) the real amounts.

Groceries
Dining out
Transport

Sizes and no label

Onboarding
Next: invite your team

API Reference

Progress

The ref and other <div> props (e.g. aria-label) go to the role="progressbar" track; className and style to the wrapper.

PropTypeDefault
value
number
max
number
100
tone
"neutral""accent""success""warning""danger""info"
"accent"
label
string
size
"sm""md"
"md"
valueText
string
hideValue
boolean
false
description
ReactNode
style
CSSProperties
className
string

Accessibility

No keyboard interaction of its own.

ARIA and semantics:

  • role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax and aria-valuetext.
  • Named by the visible label (aria-labelledby), or by aria-label.
  • The value is always available as text; color only reinforces it.
  • The fill transition is off under reduced motion.
© 2026 Motion. Internal documentation.