shadcn.io is not affiliated with official shadcn/ui
International Checkout Block for React
A landed-cost step for a parcel going abroad: choose a destination and see goods, shipping, import tax and duties in a table, a delivery window in business days, and move the import costs between pay now and due at delivery.
Installation
Overview
Show what a parcel really costs at the door, with this international checkout for React with Base UI. A compact header from Dunewrack Co, a surf-wear shop, sits over a hairline frame with a side cell. In the main cell a Native Select chooses the destination (United States, United Kingdom, Germany, Japan or Australia) over a plain table that prices the goods, the shipping, the import tax and the duties, each row saying which example rate it used and whether it is paid now or due at delivery. Under it a radio group, "Who pays at delivery?", moves the tax and duties between "Include duties now" and "Pay on delivery". The side cell holds the two figures that matter, Pay now and Due at delivery, and the delivery window counted in business days from a fixed day. The rates, the duty-free allowances and the shipping prices are typed example numbers, said so on the page. Pay is the only Shine Button. It's built from Native Select, Field, Shine Button and Guides, with a CSS entrance only. For shops that ship across borders.
FAQ
Where do the rates come from?
From the PLACES table at the top of the file, and they are examples, not a quote or tax advice: an import tax rate and a duty rate in basis points, a duty-free allowance in cents and a shipping price per destination. Real duties depend on what the item is (its tariff code), where it was made, the parcel's value and the day. For real numbers use your carrier's or a duty-and-tax provider's API, and keep this layout.
How are the amounts worked out?
In whole cents, with each rate applied once and rounded once. Duty is the goods total times the duty rate, and only when the goods are over the destination's allowance. The import tax is charged on goods, shipping and duty together, the way many countries do it. The total in each cell is a sum of rows you can see, so nothing is typed twice.
What does Who pays at delivery? change?
Only when the import costs are due. With "Include duties now" you pay goods, shipping, tax and duties today and nothing is due at the door. With "Pay on delivery" you pay goods and shipping today and the carrier collects the tax and duties, so the Due at delivery figure shows them. The table's rows say "Pay now" or "Due at delivery" accordingly, and the button's amount follows.
How is the delivery window counted?
From the fixed "today" in the file, adding the destination's fastest and slowest transit times in business days and skipping Saturdays and Sundays. It shows a range such as "Fri 23 Oct to Tue 27 Oct". No holidays or cut-off times are modelled; your carrier's API knows them.
How does it look on a phone?
The side cell stacks under the radio group, with its own top rule, so the order is the country, the cost table, who pays, then the two figures. The table keeps two columns (the cost with its detail line, and the amount) at every width, so it never scrolls sideways, and the Pay button stays pinned to the bottom of the screen.
What stays local in the demo, and how do I wire it up?
Everything. The destination, the choice and the figures live in the block's state, no carrier or tax service is called and Pay only waits 700 ms and says that nothing was charged. To connect it, request the landed cost from your provider whenever the destination or the basket changes, show its numbers in the same rows, and recompute on your server before charging.