shadcn.io is not affiliated with official shadcn/ui
Shipping Calculator Storefront Block for Solid
A delivery estimate popover on a product page: a ZIP or postal code and a country, three methods priced and dated from a typed zone table, free Standard over a threshold, and the chosen method written into the page.
Installation
Overview
Answer "when would it get to me, and what will it cost" before the shopper adds anything, with this delivery estimate for Solid with Ark UI. A header names a folding bench from Stoneleigh, a garden furniture shop. In a hairline frame with a plus mark on each corner, a drawn bench sits beside its price, a line and meter that say how far the price is from free Standard delivery, and a Delivery Button that opens a Popover. In it a Native Select takes the country, an Input takes the code, and a valid code is matched to a zone by a typed prefix table and lists Economy, Standard and Express with a price in cents and an arrival date. An invalid code marks the field and says why. Choosing a method and pressing Use this method closes the popover, returns focus to its button and writes "Standard, $9, arrives Mon 19 Oct" into the page. It's built from Popover, Native Select, Input, Field, Shine Button and Guides, with a CSS entrance only. For a product page, a cart sheet or a quote form.
FAQ
How do I fill it with my own rates?
Edit ZONES for each zone's prefix characters and the price in cents and days to the door of the three methods, and COUNTRIES for the free threshold and the code's hint. The price of the product is PRICE. Dates, the free line, the meter and every price in the list come from those tables.
How is free Standard worked out?
Standard is free when the basket reaches the country's threshold, in cents: $75 for the United States and $120 for Canada. The bench costs $68, so the page says "Add $7 for free standard delivery" and the meter shows the share, and a bigger basket would make Standard show Free. Express and Economy are never free.
How does the popover behave?
It is closed on load and opens from the Delivery button; Escape closes it and focus returns to the button, as does Use this method. It is not modal, so the page stays readable behind it.
What stays local, and how do I wire it to a carrier?
The rates are made up and the zone is chosen by the first character of the code, so nothing is looked up, ordered or shipped. To wire it up, send the code, country and basket to your carrier or your own rate endpoint when Check is pressed, and replace the list of methods with its answer; the rest of the block does not change.
What does the code check?
A United States code is five digits; a Canadian code is a letter, a digit, a letter, an optional space and the same again. A code that fits but starts with a character no zone covers says "We do not deliver there in this demo". The problem line has a reserved height, so the popover does not jump.