Shadcn.io is not affiliated with official shadcn/ui
Checkout Weight Based Shipping
A shipping cost calculator block that displays per-item weight, total package weight, tiered shipping rates by weight range, dimensional weight notice, and a combine shipments toggle
Calculate shipping costs by package weight with this checkout block for React and Next.js. Each item displays its weight, a running total tracks the package, and tiered rate bands show exactly what shipping costs at each weight range. Includes a dimensional weight advisory and an option to combine shipments for savings. Built with TypeScript, shadcn/ui components, and Tailwind CSS.
Related Components
Checkout Grouped Items
Cart items grouped by category
Checkout Delivery Schedule
Delivery date and time scheduler
Checkout Store Pickup
In-store pickup checkout
Checkout Locker Delivery
Package locker delivery
Checkout Shipping Options
Shipping method selector
Checkout Single Page
Complete single-page checkout
FAQ
Was this page helpful?
Sign in to leave feedback.
Warranty Addon
A warranty and protection plan add-on selector during checkout with tiered coverage options, expandable coverage details, auto-selected recommendation, and add-to-order button using shadcn/ui and Tailwind CSS
Wishlist To Cart
A React and Next.js wishlist to cart conversion block with multi-select checkboxes, bulk add to cart action, price change indicators, and item management using shadcn/ui Checkbox, Button, Badge, and Tailwind CSS