Shipping Estimator React component
A shipping and delivery estimator: a free-shipping progress bar, country and postal code fields with per-country validation, delivery options (Standard, Express, Next day, store pickup) with prices and business-day ranges, remote-area surcharges and an animated timeline of real delivery dates for the chosen option.
About the Shipping Estimator component
Shipping Estimator answers 'how much and when?' before checkout, which is one of the most common reasons people abandon a cart. Shoppers pick a country, enter a postal code and see every delivery option with its price and date range.
A timeline turns the chosen option into real dates that skip weekends, a free-shipping bar shows how close the cart is to free delivery, and remote areas get an honest surcharge and longer estimate instead of a surprise later.
When to use it
Place it on the cart page or in a product page's delivery section, especially if you ship internationally or offer several speeds.
If you only have one flat rate everywhere, a single line such as 'Free shipping over $50, 3–5 days' is clearer than a form.
Installation
Add the Shipping Estimator component to your project with the shadcn CLI. It lands in components/shipping-estimator.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/shipping-estimatorOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeCollections
Use-case pages that compare Shipping Estimator with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Shipping Estimator FAQ
- How are delivery dates calculated?
- From the moment the shopper clicks Estimate, the block adds business days and skips Saturdays and Sundays. Public holidays aren't included, so the summary says so. For exact dates, compute them on your server and pass them in.
- How do I add countries or change rates?
- Pass your own countries array. Each country has its postal label, an example, a validation pattern, the day ranges for Standard and Express, whether Next day is offered, the Express price and optional remote postal prefixes.
- What counts as a remote area?
- Any postal code that starts with one of the country's remote prefixes, such as Alaska and Hawaii ZIPs in the demo. Those get a $15 surcharge, a longer Standard range and no Next day option.
- Why is the date computed after the click?
- Formatting today's date during render can differ between the server and the browser and cause hydration warnings, and the estimate should start from the shopper's own clock anyway.
- Is it accessible?
- Fields have labels, the postal error is linked to its field and focused on submit, options are a radiogroup with the price and days in each label, and the estimate summary is announced when it changes.
