Spark UI
Tip Splitter

Customize

Bill Amount
40
Tip %
20
People
2
Currency
Accent Color
Background
Card Color
Surface Color
Corner Radius
40
Ruler
Animation Speed
100

Tip Splitter

Widgets
138 views•23 uses

Props

11 properties
initialBillnumber40
Starting bill before tip.
initialTipnumber20
Starting tip; values off the presets open the custom slider.
initialSplitnumber2
Starting number of people splitting.
currencystring$
Symbol shown before every amount.
accentColorcolor#ff8a3d
Needle, selected chip, tip amount and pay fill.
backgroundcolor#efeee9
Colour behind the card.
cardColorcolor#0b0b0c
Fill of the card and toast.
surfaceColorcolor#1b1b1d
Fill of the chips, rows and buttons.
radiusnumber40
Roundness of the card.
showRulerbooleantrue
Show the draggable tick ruler under the amount.
speednumber100
Speed of springs and the pay sequence.

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 tip-splitter

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

A bill-splitting card: scrub a ruler to set the amount, pick a tip, choose how many people pay, then pay and watch a receipt toast rise out from under the card.

KEY FEATURES

  • ·Drag or fling the tick ruler to set the bill; it follows your pointer 1:1 and settles on a whole amount with a spring
  • ·Every number rolls digit by digit in the direction it changed
  • ·Tip chips share one sliding highlight, and the sliders chip swaps the split row for a custom-percentage slider
  • ·Pay fills the button while it processes, then a receipt toast rises out with a self-drawing check mark
  • ·Scales itself to fit any container, from a small preview card to a full-screen demo