shadcn.io is not affiliated with official shadcn/ui
Delivery Slots Storefront Block for Ark UI
A delivery slot matrix for a florist: seven days by Morning, Afternoon and Evening, each cell a radio with its price and seats left, sold-out windows written in words, and Confirm to hold the chosen slot.
Installation
Overview
Let a shopper book a window for a delivery that has to be on time, with this slot matrix for React with Ark UI. A header names the choice and says what Sorrel & Sage delivers. In a hairline frame with a plus mark on each corner, a table lists seven days as rows and Morning, Afternoon and Evening as columns, and every cell is a radio showing its price and how many seats are left. A window with none left says Sold out, is struck through and cannot be chosen, weekend windows cost $3 more, and the first of the cheapest slots carries the words Lowest price. The cells are one radio group, so the arrow keys walk the table and skip a sold-out cell. The foot writes the choice as "Thursday 15 Oct, afternoon, $4" and holds the primary Shine Button. It's built from native radios, Shine Button and Guides, with a CSS entrance only. For a flower, grocery or furniture delivery, or any booking where capacity is the point.
FAQ
How do I fill it with my own windows and capacity?
Edit WINDOWS for the three parts of the day (label, hours, base price and seats per day) and WEEK for the days on offer, each with how many seats are already booked in each window. The seats left, the sold-out state, the weekend extra, the lowest price and the open count are all worked out from those numbers.
How do the arrow keys work?
Every cell is a native radio input in one group, so the browser moves the choice with the arrow keys in table order and skips a disabled one. There is no custom key code to keep in step, and it works the same on all seven targets.
How is a sold-out slot shown?
In words and a strike-through, never colour alone: the cell reads Sold out in place of the seat count, the price is struck through, the radio is disabled, and a screen reader hears "Sold out" with the day and window. The cell keeps its box, so the table never changes size.
What stays local, and how do I wire it to real booking?
The capacity, the prices and the dates are typed, and Confirm only holds the slot in the tab and says so ("Held: Thursday 15 Oct, afternoon, $4"); nothing is booked or charged. To wire it up, load the week's windows with their live seat counts from your scheduler, and have Confirm place a hold on the chosen window in your own endpoint and release it if the shopper leaves.
How does it look on a phone?
The table keeps its shape: the day column shows the short day name and date, and the three window columns are about 80 pixels wide, enough for a price and "3 left". The hours under each window name drop on a phone to save width. The foot stays pinned at the bottom with the primary button.