shadcn.io is not affiliated with official shadcn/ui
Flash Sales Carousel Block for React Aria
Six daily deals for a deals shop on an endless three-up loop, each with a drawn piece, struck and sale prices, a stock bar and a Claim button, and a foot that counts laps.
Installation
Overview
Show a short run of deals that keeps coming round, with this flash sales carousel for React with React Aria. Snapbasket, a daily-deals shop, offers six pieces, each a drawn plate, the sale price beside the struck price, a saving in words, a stock bar that says "9 of 24 left" and a Claim button. The track has no ends: three deals show from the medium breakpoint (one with the next peeking on a phone), and the foot counts laps ("Deal 4 of 6, lap 2"), going up each time the track comes round past the last deal and back down when you walk it the other way. Claim lowers the stock for that deal in this demo, and a deal that runs out stays in the loop, reading "Sold out". There is no clock and no countdown. It's built from Carousel, Button, Shine Button and Guides. The shop, the pieces and the prices are made up.
FAQ
How do I use my own deals?
Edit DEALS. Each has an id, a kind (which drawing to use), a name, was and now prices in cents, and left and total for the stock. The saving percentage, the bar and the label are all derived. With product photographs, replace Drawing with an img.
How are laps counted?
A lap is counted when the position comes round the end: from the last deal to the first adds one, the other way takes one off (never below 1). It is derived from the position itself, so dragging across the end counts the same as pressing Next.
Embla's loop shows a neighbour on both sides of every deal and there are six positions.
How does it work with a keyboard?
Tab reaches Claim on each deal in view, then Previous and Next. With focus inside the carousel, the arrow keys move one deal (mirrored in a right-to-left layout) and Home and End go to the first and last position. Previous and Next never disable. Deals out of view are hidden from the tab order.
What is announced when it moves?
The foot's status line is the block's one polite live region: "Deal 4 of 6, lap 2" after a move, and "Claimed here. Nothing was bought." after a Claim.
What stays local in the demo?
Claim only lowers a number held in the page. Nothing is bought, reserved or saved, and the stock returns on reload. To wire it for real, call your own endpoint from the Claim handler and set the stock from its answer, including a sold-out deal; keep the status line honest about what was reserved.