shadcn.io is not affiliated with official shadcn/ui
Multi Address Checkout Storefront Block for React Aria
Items assigned to recipients in a matrix: four hampers by three delivery addresses with one radio per row, a send-all toolbar, per-address subtotals with flat shipping and a derived 3 parcels to 2 people.
Installation
Overview
Send one order to several people, with this multi-address checkout for React with React Aria. A header names the shop, Dormouse & Co, and says what the block is. A hairline frame with a plus mark on each corner holds a native table: the rows are four gift hampers with a drawn picture and a price, the columns are three delivery addresses (two belong to Wren Aldous, one to Odell Marchetti) marked with initials, and each row has one radio. A toolbar band sends every hamper to one address at once. A hairline strip under the table gives each address its hampers, a flat shipping charge of $6.50 when it has any, and its total; an address with nothing assigned drops out of shipping and says so. A heading says what the split makes, such as "3 parcels to 2 people". Everything is worked out in whole cents from the rows. Confirm recipients is the one Shine Button. It's built from a native table, Button, Shine Button and Guides, with a CSS entrance only. For gift shops, florists and any shop that sends one basket to several addresses.
FAQ
How do I fill it with my own items and addresses?
Edit HAMPERS (an id, a name, a price in whole cents and a kind for its drawing), RECIPIENTS (an id, the name, a short label for the column, the initials and a person key that groups addresses of one person) and START, the first assignment. SHIPPING is the flat charge per address that gets anything.
How are the parcels, people and totals worked out?
A parcel is an address with at least one hamper, and a person counts once however many of their addresses get a parcel, so Wren's Home and Studio are two parcels to one person. Shipping is the parcel count times the flat charge, and the total adds the hampers' prices. The status line repeats the new split after every change.
What stays local, and how do I wire it to a real order?
Nothing is ordered and no address is collected here; the addresses are three typed labels. To wire it up, load the shopper's saved addresses from their account, post the assignment ({ hamperId: addressId }) with the order, and compute shipping on the server. The demo's flat rate is only an example.
Why are the radios native?
A native radio group gives the arrow keys, grouping and form behaviour for free, and each radio has a name that says the hamper and the address ("Cheese board hamper to Odell Marchetti, Odell"). They are drawn as rings with a solid foreground dot, so the choice is clear without a colour.
How does it look on a phone?
The table keeps its shape: the hamper's name wraps in the first column and the three address columns stay narrow with their initials and short labels. The pictures are dropped to save width and the summary cells stack. The foot rides the bottom of the screen.
Is it accessible?
The table has a caption, column and row headers, and a labelled scroll region you can reach with the keyboard. Each address column is named in text as well as with initials, every control has a name, and a polite status line announces every move and the new parcel and person counts.