shadcn.io is not affiliated with official shadcn/ui
Back In Stock Storefront Block for Ark UI
A size by colour matrix where a sold-out cell turns the Add button into Notify me: a typed restock range, an Email or Text alert with a checked field, and the alert you saved.
Installation
Overview
Tell shoppers when a sold-out size returns, with this back-in-stock panel for React with Ark UI. A header introduces Spindle & Spool, a knitwear and yarn label. In a hairline frame with a plus mark on each corner, the first band shows a drawn jumper, its name and price. Under it, a matrix of four colours by five sizes is made of native radio cells: an in-stock cell is plain, a sold-out cell is dashed, struck through and named as sold out for a screen reader. A details list says what is chosen, whether it is in stock or when it is expected back (a typed date range, "Expected 18 to 25 Nov"), and the alert you set for it. For a sold-out cell, a Segment Group picks Email or Text and one Field with an Input takes the address or number and checks it; for an in-stock cell the same space says the size can be added. The one Shine Button lives in a single reserved cell and changes its words between Add to bag and Notify me. It's built from Segment Group, Field, Input, Shine Button and Guides, with a CSS entrance only. For a product page, a variant picker or any shop with limited runs.
FAQ
How do I fill it with my own stock?
Edit COLOURS: each has an id, a name, a grey tone, a units array in the order of SIZES (0 means sold out) and a restock window as two ISO dates. The matrix, the details and the button label all follow those numbers, so there is nothing else to keep in step.
What does Notify me do?
It checks the field for the chosen channel (an email shape, or 7 to 15 digits for a number), shows the problem under the field and moves focus to it if it is wrong, and otherwise keeps the alert in the page, shows it in the details list and moves focus there. Nothing is sent and nothing is stored. Post the variant, the channel and the address to your own back-in-stock service from the submit handler, and keep the status line so the person is told it was saved.
Why does the button change its words?
So the panel has one primary action in one place. For an in-stock size it says Add to bag and the status line says it was added in this demo; for a sold-out size it says Notify me. The button never moves or changes width, because its cell has a minimum width and the form below it is held to the same height in both states.
How do I move around the matrix?
The cells are one radio group, so Tab enters it once and the arrow keys move between cells, row by row, as with any radio group. Each cell is named with its colour, size and whether it is sold out.