shadcn.io is not affiliated with official shadcn/ui
Shipping Options Carousel Block for Svelte
Four delivery options as radio cards on a track, with a price, an arrival window counted in business days from a fixed date and a summary that totals the order in whole cents under one Use button.
Installation
Overview
Let a customer compare delivery speeds side by side and pick one, with this shipping options carousel for Svelte with Ark UI. Parcelhop, a delivery-options widget, offers four ways to send an order: Standard, Express, Overnight and Same day. Each is a card with the price, the arrival window ("Fri Oct 23 to Mon Oct 26") counted in business days from a fixed order date, and a line about tracking. The cards are native radio buttons in one group: Tab reaches the chosen card, the arrow keys move the choice, and when the choice moves to a card that is out of view the track scrolls to it. Under the track a summary lists the items, the shipping for the chosen option and the total, and holds the block's one primary button, "Use Express" (Shine Button). Standard ships free once the basket passes $75, and every figure is a whole number of cents. The foot holds the counter, a dot for each step and Previous and Next Buttons. Two cards show from the medium breakpoint with a third peeking, one with the next peeking on a phone. The ruled bands come from Guides. The prices, windows and options are made up for the example.
FAQ
How are the arrival windows worked out?
AS_OF is the order date (a Monday) and each option types its soonest and latest business days. The page adds business days with Date.UTC arithmetic that skips Saturdays and Sundays, then spells the day with a fixed list of day and month names, so the text is the same on the server and in the browser and never depends on the visitor's clock. Same day arrives on the order date itself.
How is the total calculated?
Items, each option's price and the total are integers in cents (ITEMS_CENTS, cents), added and formatted only at the end with moneyOf, so there is no floating-point drift. Standard is free when the items reach FREE_FROM_CENTS; the "Free" word and the total both come from that one rule.
How does it work with a keyboard?
The cards are a native radio group inside a fieldset, so it behaves as the platform does: Tab enters the group on the chosen card and the arrow keys move and choose. When a card that is out of view takes focus, the track moves to show it. Previous, Next and the dots are ordinary buttons, and Previous and Next stay in the tab order at the ends.
What is announced?
One polite status line under the track. Choosing says what was chosen and what it costs ("Express, $12.00. Not saved yet."), pressing the primary says "Express saved in this demo. Nothing was booked.", and moving the track by hand shows the counter again ("Options 1–2 of 4").
What stays local in the demo?
Everything. The button saves nothing and books nothing. To wire it for real, return the options and prices for the basket from your carrier or rates API into OPTIONS, keep the choice in your checkout state, and send the chosen id with the order. The names are fictional; use your own carriers' names.