shadcn.io is not affiliated with official shadcn/ui
Seasonal Sale Storefront Block for Ark UI
A three-week markdown for a wool shop: six drawn throws and scarves repriced for the week you preview, a stepped ladder of 20, 30 and 40 percent, and a copyable code for each week.
Installation
Overview
Show how a sale steps down and let people see the price before it arrives, with this seasonal sale panel for React with Ark UI. A header names Marl & Moor, a shop for wool throws and scarves, and holds a Toggle Group that previews Week 1, 2 or 3. A hairline frame with a plus mark on each corner has the six pieces at the start, drawn as a throw, scarf, blanket, shawl, cushion cover and snood, each with its list price struck, the price for the week you preview and the saving, all worked out in cents and rounded to the cent. The side cell is the ladder: three stairs of 20, 30 and 40 percent, the week running at the fixed date marked Now, the week you preview tinted, and a code for each week with a Copy Button that really copies. A status line says what you are previewing ("Week 3 price, from 19 Oct"). There is no clock. It's built from Toggle Group, Copy Button, Badge and Guides, with a CSS entrance only. For a markdown calendar, an end-of-season sale or a loyalty preview.
FAQ
How do I set my own weeks and prices?
Edit WEEKS (an id, the first day as an ISO date, the percentage off and a code) and PIECES (a name, a note, the list price in cents and a kind for the drawing). The week marked Now is the last one whose first day is on or before AS_OF, and every price is round(list * (100 - percent) / 100) in cents.
What does previewing a week do?
It reprices all six rows to that week's percentage, tints that step in the ladder and says so in the status line. It does not change which week is running; that comes from the date. Previewing a future week is how a shopper sees what waiting costs.
Do the codes work?
Only the clipboard is real: Copy puts the code on it and the status line confirms. The codes exist only in this demo. To make them work, validate the code in your checkout against the week's dates and percentage.
Why is there no countdown?
The sale is described by dates, not a clock, so the page reads the same for everyone. The date it runs to is typed (SALE_ENDS). If you want a clock, the flash sale block has one with a Pause.
How does it look on a phone?
The ladder stacks under the pieces with a rule above it, the six rows keep their drawing, name and price, and the ladder's three steps read as a short list.
Is it accessible?
The week toggles are a named group, struck prices have a hidden "Was" and the new price a hidden "Now", and each Copy button names its code and week. Nothing depends on colour: the previewed step has a marker and a tint, the running week says Now. The status line is a polite live region present from load.