shadcn.io is not affiliated with official shadcn/ui
Sold Out Size Error Block for Svelte
A full-screen page for a sold-out size: a drawn sweater, a row of five sizes with the sold-out ones struck, a notify field and Shine Button that follow the chosen size, and two similar knits in stock.
Installation
Overview
Keep the sale alive when a size is gone with this sold out page for Svelte with Ark UI. It's the screen Alderwool, a knitwear brand, shows when the size a shopper wanted is sold out: the page's two side rails run its full height and one band crosses the screen between two rules, split in two with the picture first. The picture is a greyscale sweater drawn in SVG, solid when the chosen size is in stock and a dashed twin that fades in when it isn't. A row of five sizes, a Toggle Group, strikes the sold-out ones and marks them Out. What sits under the row follows the chosen size: for a sold-out one, when it is expected (counted from a typed date against a fixed day) and an email Field; for one in stock, how many there are. The Shine Button follows too, Notify me when Medium is back or Add Small to bag. Under the split, two drawn knits that are in stock in the chosen size. For any shop with sizes.
FAQ
What stays in the page, and how do I make it real?
Everything. Notify checks the email, waits a moment and says in a polite status line that the shopper is on the list in this demo and that no email will be sent; Add to bag only records the choice. Stop notifying and Take out put each back. To make it real, send the size and the email from submit to your stock service and read stock, dates and the similar knits from your catalog.
How are sold-out sizes shown without colour?
Three ways at once: the size's letter is struck through, a small word under it says Out or In, and the chosen size is a solid fill. A screen reader hears each size named with its state ("Medium, sold out"). A sold-out size can still be chosen, because that is how you ask to be told.
Where does the expected date come from?
From a typed ISO date per size and one fixed "today", counted with UTC day numbers ("Expected 3 Dec 2026, in 49 days"). A size with no date says so. Nothing reads the clock, and the numbers are the same on the server and in every time zone.
How is the sweater drawn, and can I change it?
It is one SVG of a few paths in the text colour at low weights, hidden from assistive technology, with the facts in words beside it. The same drawing, with a cardigan collar and a roll neck, draws the two similar knits. The dashed twin is a second copy of the lines that fades in; no dash is animated, and nothing moves under reduced motion. Swap the paths for your own product shots, or keep the drawing as a placeholder.
How does it work with the keyboard?
The sizes are one single-choice toggle group: Tab reaches it, the arrow keys move between sizes and one is always chosen. The button's label and the field under the row follow the size; a refused notify moves focus to the email field and says what is wrong. The two similar knits are links in reading order after the form.