Ajax UI
Components/Split Bill

Split Bill

Divide a bill across N people - equal split or custom per-person amounts with a "remaining" indicator.

Total a dividirR$ 324,80
  • AnaR$ 81,20
  • BrunoR$ 81,20
  • CarlaR$ 81,20
  • DiegoR$ 81,20

Installation

npx @ajax-ui/cli add split-bill

Props

  • total - required.
  • defaultParticipants - list of { id, name }. Add/remove via the inline controls.
  • defaultMode "equal" | "custom".
  • onChange({ mode, participants, remaining }) - fires on every adjustment.

Custom mode

When in custom mode, the "remaining" indicator turns green when fully assigned, amber when partial, and red when over-allocated.