shadcn.io is not affiliated with official shadcn/ui
Charity Round-Up Checkout Block for Ark UI
Round the order up to the next $1, $5 or $10 for one of three invented causes, with each cause showing what the extra funds, a switch that is off to begin with and a total in whole cents.
Installation
Overview
Turn spare change into a gift, with this charity round-up for React with Ark UI. A compact header from Zephyr Roasters, a coffee bean seller, sits over a hairline frame with a plus mark on each corner. The first band is a row of three pills for the size of the round-up (the next $1, $5 or $10), each showing the extra it adds to this $23.43 order. Under it three invented causes are a radio group, each with a line on what the round-up would fund there at the chosen size, worked out from a typed rate (25 cents a school meal, 60 cents a seedling, $1.50 a day of shelter care). A Switch adds the round-up (off to begin with), and a summary adds the order and the round-up in whole cents. Continue to payment is the only Shine Button. There is no running total of what other people gave, because nothing here could back it. For shops that offer the buyer a way to give at the till.
FAQ
How is the round-up worked out?
In cents: the extra is the step minus the remainder of the order divided by the step, so a $23.43 order rounds to $24.00 (57 cents), $25.00 ($1.57) or $30.00 ($6.57). Nothing is a float. If the order already ends on a multiple, the extra is a full step, so the round-up is never zero.
Where do the impact lines come from?
From a typed cents rate on each cause: the round-up divided by the rate, rounded down. 57 cents funds 2 school meals at 25 cents; under one seedling at 60 cents prints "less than one seedling". The causes and rates are invented; replace CAUSES with a charity's own published figures and say where they come from.
Why is the round-up off to begin with?
A donation added by default is a charge the buyer didn't choose. The switch starts off, the summary says "Not added" until it's on, and each change is announced once in the polite status line with the new total.
How does it work with a keyboard?
The sizes and the causes are native radio groups, each a single Tab stop with the arrow keys moving between options, and the chosen one is shown by fill and a dot, not by colour alone. The switch is named "Add the round-up".
What stays local, and how do I connect it for real?
The choices and the total live in the tab's state and nothing is charged or sent. To connect it, post the unit, the cause and the flag with the order, let the server compute the round-up from the final total (tax and shipping change it), record the donation as its own line, and pass it on to the charity through your payment provider's donation or payout feature.