Divide expenses fairly with smart percentage splitting. This React expense split dialog lets users enter an amount and allocate percentages among participants with real-time calculated shares. Built with shadcn/ui Dialog, Button, Input, and Slider components using Tailwind CSS, users split costs accurately for trips, dinners, or shared purchases. Enter amount, adjust splits, see totals—perfect for expense tracking apps, group travel planners, roommate tools, or any Next.js application where fair cost sharing improves financial transparency among groups.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-expense-split.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-expense-split.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-expense-split.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-expense-split.json

Related blocks you will also like

Questions you might have