shadcn.io is not affiliated with official shadcn/ui
Flash Sale Countdown Banner Block for Ark UI
A flash-sale countdown for a lighting shop: the product with its struck regular price and sale price, a clock of hours, minutes and seconds in three cells, a Shine Button to claim the price, and a thin meter of how much stock is claimed.
Installation
Overview
A flash-sale banner for React with Ark UI. Two bands sit between the page's rails. The first holds the product (a studio lamp) with its regular price struck out, the sale price and the percentage off, a clock of hours, minutes and seconds in three cells, and an outline Shine Button, Claim the price. Under a rule drawn by the Guides, the second band shows how much of the stock is gone: "73 of 100 claimed", "27 left" and a thin meter. The saving and the meter are worked out from the prices and the counts, so editing the numbers keeps the copy honest. When the clock reaches zero the badge reads Ended and the button points to the product instead. It's built from Timer, Progress, Badge, Guides and Shine Button, with your theme's tokens for every colour. For flash sales, limited drops and any offer with a deadline and a limited stock.
FAQ
How do I change the prices and the stock?
Edit SALE at the top of the file: the regular price, the sale price, how many are claimed and the stock. The percentage off, the "left" count and the meter's fill are derived from them (30% off for 84 against 120), so they never disagree with the prices. The meter is a snapshot, not a live count: feed claimed from your own stock figure to move it.
When does the sale end?
The clock counts 2 hours, 14 minutes and 36 seconds from the moment the browser has rendered the page (ENDS_IN_MS), and the server draws dashes, so a cached page never shows an old time. For a real deadline, work out the time left in the effect that starts the clock, deadline - Date.now(), never during render.
What does a screen reader hear?
A sentence, "The sale ends in 2 hours 14 minutes.", written as plain text that changes by the minute, and no ticking digits: the three cells repeat it, so they're hidden from assistive technology. A polite status line says only that the sale has ended. The prices read as "Was $120, now $84", and the meter is decorative because "73 of 100 claimed" is written next to it.
What happens at zero?
The badge changes from "30% off" to "Ended", the status line announces "The Lumenhouse flash sale has ended.", and the button's label changes from Claim the price to See the lamp. Point both at the pages you need by changing the label and href together.
Where does the button go?
Claim the price is a link (href="#"): point it at your product or checkout. It's an outline Shine Button, small, so it stays quieter than the page's main call to action; a band of light sweeps across it once on hover and keyboard focus.
It takes asChild with the link inside, so it can be your router's link.
How does it fit on a phone?
The product and prices come first, then the clock, with "Ends in" at its start, then the button at the start. The meter band runs full width under a rule. With reduced motion the entrance is off and the seconds cell is hidden, so the clock moves by the minute. Nothing scrolls sideways at 320 pixels.