Inputs & feedback
ProgressBar
Apple-style fill on a glass track. Spring physics. Primary variant gets a flowing aurora gradient when `animate=true`.
ProgressBar is the spring-tweened progress indicator. Glass track, gradient fill that springs to its target value. Pass animate to layer a flowing aurora gradient on top — perfect for "saving in progress" surfaces where standing still feels stalled.
Three variants line up with the slider's three semantics so a savings goal's slider and progress bar can share a color.
Example
tsx
import { ProgressBar } from '@kidcash/ui';
<ProgressBar variant="primary" value={61} animate label="61% to goal" />Try it live
← Back to the playground to see ProgressBar rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.