shadcn.io is not affiliated with official shadcn/ui
Coupon Codes Carousel Block for Vue
Eight notched coupon tickets for a deals wallet in a free-scroll rail that snaps near a ticket, each with its saving, minimum order, days left, a code and a real Copy button, and expired tickets that stay put and say why.
Installation
Overview
Keep a wallet of offers in one rail, with this coupon codes carousel for Vue with Ark UI. Saverbee, a deals wallet, shows eight coupon tickets, each notched at the perforation with a CSS mask rather than an image: the saving large ("15% off", "$20 off"), what it applies to, the minimum order, how long it has left ("Ends in 12 days"), the code in a monospace chip and a Copy Button that puts the code on the real clipboard. Two tickets have run out: they stay in the rail, read "Expired" with their date, and their Copy is unavailable with the reason in its name. The rail is free scroll, so a fling stops where it stops and then settles on a ticket; the arrows move two tickets (one on a phone, where the next ticket peeks), a thin line under the track shows how much of the wallet is in view, and the edges fade only on a side with more. It is built from Carousel, Copy Button, Badge, Button and Guides, with CSS only. The shop, the tickets and the codes are made up.
FAQ
How do I use my own coupons?
Edit TICKETS. Each has an id, a saving and a title (as they are written), a rule for the minimum order, an ends date as an ISO string and a sample code. Change AS_OF to the day your list was current. The days left are whole-day arithmetic between the two dates, so "Ends in 12 days", "Ends tomorrow" and "Expired Oct 2, 2026" are derived, never typed; a ticket whose date is before AS_OF is expired.
What does Copy do?
It writes the code to the real clipboard and the block's one polite line says "Copied FRESH15" for a few seconds before it goes back to the position ("Tickets 1–2 of 8"). If the browser refuses the clipboard (a page not served over HTTPS, or no permission) the button shows a cross and says so. On an expired ticket Copy is marked unavailable instead of disabled, so it stays reachable, and its name says "Copy code BREW12 (expired, unavailable)".
How is the free scroll different from paging?
A fling stops near a ticket and snaps to it, instead of stopping on a fixed page. The arrows and the arrow keys still move two tickets on a wide screen and one on a phone, Home and End jump to the ends, and the counter says which tickets are whole ("Tickets 3–4 of 8"). There are no dots. The rail uses the Carousel's proximity snapping with mouse drag on.
How does it work with a keyboard?
Tab reaches Copy on each ticket near the view, then Previous and Next. With focus in the rail, the arrow keys move by the current step (mirrored in a right-to-left layout), and Home and End jump to the first and last. Tickets more than one step out of view are hidden from the tab order and from screen readers.
What stays local in the demo?
Everything except the clipboard. The tickets are typed example data and the codes are samples that redeem nothing; no shop, wallet or account is called. To wire it for real, load the member's tickets into TICKETS and mark a ticket used on your server when the code is applied at checkout, then drop it from the list or give it an expired date.