shadcn.io is not affiliated with official shadcn/ui
Digit Countdown Banner Block for Ark UI
A slim early-pricing band between the page rails, in your theme: the offer at the start, then past a solid divider a live countdown to the end of this month in a small frame beside a Shine Button, with a hairline along the bottom edge that drains as the month runs out.
Installation
Overview
Put a clock in a band with this compact call to action for React with Ark UI. Between the page rails, the offer sits at the start ("Early pricing ends this month", a sentence with a bold lead), and past a solid divider that meets the top rule a live countdown to the end of the month shows days, hours, minutes and seconds, whose digits drop into place as they change (Countdown Text), in a small frame of hairlines with + marks on its corners, beside a Shine Button "Claim early price". Along the band's bottom edge a thin foreground-coloured line shows how much of the month is left. Below lg the two parts stack with a rule between them. It's built from Countdown Text, Shine Button and Guides, with CSS only for the line and your theme's tokens for every colour, so the band follows your theme, light or dark. For early pricing, monthly promotions and any offer that closes when the month does.
FAQ
What is it counting down to, and can I change it?
The first moment of next month in the visitor's own time zone, worked out in the browser: monthEnd() at the top of the file. The server can't know the time, so until the page is running the digits are hidden and the space is reserved, so nothing shifts when they appear. When the countdown reaches zero it moves to the end of the next month by itself. For a fixed deadline, return your own Date from monthEnd() and the hairline's start from leftOf().
How does the hairline drain?
Its width is the share of the month still ahead, from the first of the month to the end. It starts full, drops to the real share once the page knows the time, and is updated every thirty seconds (DRAIN_EVERY_MS) with a CSS width transition; that's slow because a month has forty thousand minutes, so the line shifts by a pixel only every few hours. It is decoration and hidden from screen readers; the countdown carries the information.
What does a screen reader hear for the digits?
The visible digits are hidden from assistive technology, and a visually hidden sentence in full words ("19 days, 7 hours, 50 minutes, 17 seconds") takes their place inside a time element. It is not a live region, so a screen reader doesn't read every second out; it reads the current time when the reader reaches it.
Can I change how the countdown is written?
Yes: Countdown Text takes a format (narrow is the default, "19d 07h 50m 17s"; short and long use words; digital writes 19:07:50:17) and a locale, which also sets the digits and unit names. Days and hours drop out when they reach zero, so the last hour reads 59m 59s.
Where does the button go?
Claim early price is a real link (href="#"): point it at your offer or checkout. It is a ShineButton wrapping an a element, so it can be your router's link.
What moves, and what happens with reduced motion?
Only a digit that changes moves: it drops into its one-digit window as the old one falls away. With reduced motion the digits change in place and the hairline jumps to its new length. On a narrow screen the band stacks: the copy, then a rule, then the countdown and the button.