Shipping Calculator 1 block design & features
A shipping and delivery estimator built with shadcn/ui Card, Input and Radio Group. A centered heading and short intro sit above a card with a ZIP code field, prefilled with a default code, and a Check Delivery Options button, and a list of carriers sits at the bottom.
Entering a valid ZIP code and pressing the button or Enter shows a short loading state, then a list of delivery options that fades in as selectable rows. A Change ZIP link beside the heading hides the options again. Each row shows the method, the carrier, the price or Free, and an estimated delivery date range. Prices and delivery times change depending on the region the ZIP code falls in, and invalid codes show an inline error.
On mobile the field and button stack. The shipping options, with their prices and delivery days, and the default ZIP code are props.