shadcn.io is not affiliated with official shadcn/ui
Timer Urgency Checkout Block for Ark UI
An honest 10-minute hold on three posters with Pause and a single 5-minute Extend, low-stock notes only where typed stock is three or fewer, a status line that speaks at one minute and at the end, and a hold that can be started again.
Installation
Overview
Hold items for a shopper without the pressure, with this timer for React with Ark UI. A compact header from Oystercatcher, a shop for screen-printed posters, holds the title and one sentence. Inside a hairline frame with a plus mark on each corner, a figure shows the time remaining on a fixed 10:00 hold, a thin bar of how much remains, a Pause (then Resume) Button and one Extend 5 minutes, which can be used once so that a slow reader is never cut off. The digits are for the eye; a sentence for screen readers gives the time remaining, and the polite status line speaks only when something is worth interrupting for: pausing, extending, one minute remaining and the end. A caption says what the clock does not do: it does not count viewers, drop a price or invent scarcity. The lines below show "Only 3 in stock" only where the typed stock is three or fewer, and say how many of them the hold covers. At zero the panel says the hold ended and that in a shop the posters would return to sale; nothing is released here, and the one Shine Button becomes Hold them again. It's built from Badge, Button, Shine Button and Guides, with a CSS entrance only. For reservations, tickets and any hold that should stay fair.
FAQ
What makes this timer honest?
It holds real stock for a fixed time and lets the shopper control it. There is no countdown to a discount, no viewer count and no scarcity words that are not backed by the typed stock: a line shows low stock only when its stock is three or fewer, and the same stock decides how many the hold covers. The caption under the clock says so in plain words.
Can people pause or lengthen the time?
Yes, on purpose: a time limit that cannot be stopped or extended fails WCAG 2.2.1. Pause stops the clock until Resume, and Extend adds five minutes once, after which its label reads Extended and pressing it says so. Both are buttons with text, reachable by keyboard, and neither is disabled in a way that hides it.
What does a screen reader hear?
The ticking digits are hidden from assistive technology and a plain sentence gives the time remaining, which a reader can visit on demand. The polite status line speaks on pause, resume, extend, at one minute and at zero, never every second.
What happens at zero?
The clock stops, the lines change from Held to Not held, the status line says that in a shop these posters would return to sale and that nothing was released here, and the Shine Button becomes Hold them again, which starts a new 10:00 hold with the extension available again. Nothing is reserved or released anywhere; the hold lives in this file.
How does it look on a phone?
The time, the bar and the two buttons stack, with the buttons side by side across the width. The lines keep the thumbnail, the note and the line total, and the foot is pinned to the bottom of the screen while you scroll.
What stays local, and how do I wire it up?
Everything: the clock runs in the tab, so reloading starts a fresh hold. In your app create the hold on your server with an expiry, show the time remaining from the server's value, call its extend endpoint once, and release the stock when the hold ends or the order is paid.