shadcn.io is not affiliated with official shadcn/ui
Address Book Storefront Block for React Aria
A Deliver to chooser for a lighting shop: three saved addresses, an Add a ZIP field checked against a zone table, and four lamps that each re-date to the chosen address, one of them refused as oversize in the remote zone.
Installation
Overview
Let a shopper say where it is going and see the consequence on every product, with this Deliver to chooser for React with React Aria. A header names the question and says what Lamplight Row is. In a hairline frame with a plus mark on each corner, a side cell holds three saved addresses (a ZIP and a town, never a street) as one radio group and an Add a ZIP Field with an Input and a Button, and beside it four lamps are listed with a drawn silhouette, the price and a line that says when each arrives. The date is the sample date plus the zone's lead days plus the lamp's handling days, moved off a weekend, and a lamp that cannot be sent to a zone says so in words instead of a date. Choosing an address re-dates all four lamps on the press; a new ZIP is matched to a zone by a two-digit prefix table and added as a local row. It's built from Field, Input, Button and Guides, with a CSS entrance only. For a product list, a category page or a basket that needs to show the delivery date for an address.
FAQ
How do I fill it with my own addresses and zones?
Edit SAVED for the addresses, ZONES for each zone's lead days and whether it takes oversize freight, PREFIXES for the ZIP prefixes the shop delivers to and the zone each belongs to, and LAMPS for the products, with their handling days and whether they are oversize. Every date and every line is worked out from those tables.
How is the arrival date worked out?
The sample date is the Friday 9 October 2026. A lamp arrives that date plus the zone's lead days plus the lamp's own handling days, and a Saturday or Sunday result moves to the Monday. The dates use Date.UTC arithmetic on fixed text, never the visitor's clock, so the page reads the same on the server and in the browser.
What happens to the oversize lamp?
The arc floor lamp ships on a pallet, and the remote zone does not take pallets, so its row reads "Not delivered to this address: oversize" instead of a date. The row keeps its height, so nothing shifts when you choose the Cabin address.
What does Add a ZIP check?
It needs five digits and a prefix that is in the table, and it adds at most three. A bad entry marks the field and says why, and a good one is added as a row, chosen, and announced in the status line. There is no lookup: a real shop checks the ZIP against its carrier. Nothing collects a street or saves an address.
What stays local, and how do I wire it to a real account?
The saved addresses, the added ZIP and the dates are all typed or held in the tab, and nothing is saved or sent. To wire it up, load the signed-in shopper's addresses in place of SAVED, persist the added ZIP through your own endpoint, and ask your delivery service for each product's arrival date instead of the tables.
Is it accessible?
The addresses are a real radio group in a labelled fieldset, so the arrow keys move the choice, and the chosen row is marked by a filled ring and a tint, not colour alone. The lamp lines are text. The status line is a polite live region that is there from load and says how many lamps arrive at the chosen address.