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.
Live preview
Example
tsx
import { ProgressBar } from '@kidcash/ui';
<ProgressBar variant="primary" value={61} animate label="61% to goal" />Want all 27 in one place?
The home playground shows every component side-by-side. Or install @kidcash/ui and use ProgressBar in your own app.