shadcn.io is not affiliated with official shadcn/ui
Split Payment Storefront Block for Radix UI
A group gift fund for a record player: five friends enter pledges, a bar and a remaining figure follow in cents, Split evenly divides the price with the odd cents on the last row, and over-pledging is cut back.
Installation
Overview
Let friends chip in toward one gift, with this pledge block for React with Radix UI. A header says what Hazel & Hound, a record shop, is buying. The framed panel shows the gift, drawn and priced, then the funding: what is pledged, what remains, a bar and a percentage, with a Fully funded Badge at 100 percent. Five rows follow, each with an initials avatar, a name and a dollar field, and a Split evenly Button that divides the price by five. The foot holds the block's one Shine Button, Add my pledge. It's built from Input, Button, Badge, Shine Button and Guides. For gifts, shared orders and group buys.
FAQ
How does Split evenly divide the price?
In whole cents: the price divided by five, rounded down, with the odd cents added to the last row, so the five pledges always add up to the price exactly.
What if someone pledges too much?
The pledge is cut back to what remains and the status line says so ("Cut back to $48.99: that covers it."). Once the gift is covered, a field that would add more is cut to nothing more. Only digits and two decimals are accepted.
Where do the friends come from?
They are typed in PEOPLE with fictional names and initials. Every row is editable in the demo, so you can play out the whole split; in a real shop, each friend would pledge only their own row from their own device.
What stays in the page, and how do I connect it?
Everything. Add my pledge only notes your amount in the status line: no card is asked and nothing is collected or sent. To make it real, store each pledge on your server, collect payment only when the fund reaches 100 percent (or hold the cards until then), and take the card in your payment provider's hosted fields.