React Dialog Block Split Bill

Divide restaurant bills fairly among friends. This React split bill dialog lets users assign menu items to specific people and calculates individual totals including tax and tip. Built with shadcn/ui Dialog, Button, and Avatar components using Tailwind CSS, groups settle payments without awkward calculations. Assign items, see totals, split fairly—perfect for restaurant POS systems, group dining apps, expense sharing tools, or any Next.js application where splitting costs among multiple people simplifies group payments.

React Dialog Block Split Bill preview

Installation

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

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

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

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

Related Components

FAQ