shadcn.io is not affiliated with official shadcn/ui
Flash Sale Storefront Block for Ark UI
A deal list for a camping gear shop: six drawn items each with its own countdown, claim bar and Claim button, a Pause for the clocks, and a sort by ending soonest or most claimed.
Installation
Overview
Run several time-limited deals at once, with this flash sale list for React with Ark UI. A header names Gorse & Gill, a camping gear shop, and holds a Toggle Group that sorts by Ending soonest or Most claimed. A hairline frame with a plus mark on each corner holds six deals, each a drawn tent, lantern, stove, pack, mug set or sleeping bag with its old price struck, the sale price and the percentage off. Every deal has its own clock in hours, minutes and seconds and its own claim Progress bar with "68% claimed, 13 left", both worked out from typed figures. A Claim Button adds one to the claimed count, the bar rises and the Bag count follows; at 100 percent the row reads Sold out, and when a clock runs out it says Ended. A visible Pause stops every clock, and the clocks start paused for anyone who asked for less motion. It's built from Toggle Group, Progress, Badge, Button and Guides, with a CSS entrance only. For a sale page, a deals section or a limited-offer shelf.
FAQ
How do I fill it with my own deals?
Edit DEALS. Each has an id, a name, a short note, the sale price in cents (cents), the regular price (was), the units in the deal, how many are already claimed, an ISO instant for when it ends and the kind of drawing. The percentage off, the percentage claimed, the units left and the clock are all worked out from those.
Is the countdown real?
It counts down from one fixed moment in the file (AS_OF, 18 Oct 09:00 UTC) to each deal's typed end, one tick a second, so the page reads the same for everyone and never shows a stale time. To run a real sale, replace AS_OF_MS with Date.now() read after mount and keep the rest. A visible Pause stops every clock, and under reduced motion they start paused with Resume beside them.
What does Claim do?
It adds one to that deal's claimed count and to the Bag count in the heading, and says so in the status line. Nothing is reserved, bought or sent; connect the handler to your cart and take the claimed count from your stock. A sold-out or ended row keeps its button, marked unavailable, and pressing it says why.
Does sorting move rows while I claim?
No. The order is set when you choose Ending soonest or Most claimed, so a claim raises a bar without moving its row. Choose the sort again to re-rank after a few claims.
How does it look on a phone?
Each deal keeps its drawing, name, prices and bar, and the clock and Claim button drop to a row of their own under it. The sort sits under the heading sentence.
Is it accessible?
The ticking digits are hidden from screen readers; each row carries a sentence ("Ends in 2 hours 14 minutes") that changes by the minute instead. Each Claim button names its deal, the bar is described by its percentage, and the status line is a polite live region present from load. The drawings are decorative.