Split amount
Splitting a bill: tap someone at the table and their face flies into the split, the bar re-divides and every share rolls to the new amount, cents and all. Pick a tip, then request what you're owed. Built on Base UI's Button and Toggle Group.
You
Ama Owusu
2 people, $63.25 each.
Things to try
- Add someone. Tap a face under "Also at the table": it flies up into the split, the bar re-divides and every share rolls down.
- Leave someone out. Press × on their row and they go back to the table; the others' shares grow.
- Change the tip. The total and every share roll to the new amount.
- Request the money. The button asks the others for what they owe, then says it's sent.
- Look at the cents. The shares always add up to the bill exactly.
Install
npx shadcn@latest add https://your-docs-site/r/split-amount.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motionHow it works
- One face, two places. Each person's face is the same Motion element in the tray and in the list, so it travels between them when they join or leave the split.
- The bill re-divides. Each slice of the bar is a Motion flex item, so they resize together; the amounts roll with the Odometer.
- Built on Base UI.
Buttonfor adding, removing and requesting;ToggleGroupfor the tip.SplitAmounttakesvalue/onValueChange(who's paying and the tip) or runs on its own, plus yourdinersand anonRequesthook. - No lost cents. What's left after an even split goes a cent at a time to the first people.
Range slider
A price range slider with a histogram behind it: while you drag a handle its price lifts out of the label and rides above the handle, then flies back when you let go.
Order tracker
A food order told like a short film: each stage plays live (the lid lifts off the steaming pot, the bag hops, the scooter's wheels spin down the road, the front door opens), then the drawing reshapes into the next stage and that one comes alive.