Spark UI
Back to UI Kit

Running Total View

Floating bars that start from the previous running total, with distinct fills for gains and losses.

Interactive Stage Preview

Customize

8 options
Accent Color
Loss Color
Changes
2
Bar Width
18
Corner Radius
6
Net Total Bar
Grid Lines
Animation Speed
100

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx spark-ui-registry@latest add mono-waterfall-steps

Writes to components/spark-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server
PropertyTypeDefaultDescription
theme'dark' | 'light''dark'Colour scheme of the card.
compactbooleanfalseShrinks the card to a smaller fixed height.
colorstring (hex)'#ff8a3d'Primary series color.
lossColorstring (hex)'#71717a'Colour of steps that reduce the running total.
changesnumber2Number of gain/loss steps between start and net.
barWidthnumber18Thickness of each bar in pixels.
radiusnumber6Rounding on each floating bar.
showTotalbooleantrueFinish with a full-height net total bar.
showGridbooleanfalseShow the dashed background grid.
speednumber100Playback speed of entry and transition animations, as a percentage.