shadcn.io is not affiliated with official shadcn/ui
Trial Countdown Billing Block for Svelte
A trial page with a live clock of days, hours, minutes and seconds that you can pause, an end date worked out from one fixed moment, and three setup tasks that add days when ticked.
Installation
Overview
Turn the last days of a trial into something to act on, with this trial countdown page for Svelte with Ark UI. It's the screen Sprigdesk, a CRM for small shops, shows near the end of a trial: the page's side rails and one band frame it, a mark and a headline say the trial is almost up, and four cells on shared hairlines hold a clock of days, hours, minutes and seconds that counts down from a typed 2 days 3:14:09. A Button beside the end date pauses and resumes it; the clock starts paused for anyone who asked for reduced motion. Three setup tasks are native checkboxes in foreground tones, each adding days (an invite 2, a calendar 2, an import 3, up to 7): ticking one moves the end date, worked out in UTC from a fixed starting moment, and lengthens the clock. The Shine Button, "Keep Pro", is the only colored control. For SaaS trials, previews and any product that charges after a period.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The clock counts down from a duration typed in the file (START_SECONDS), the end date is that moment added to a fixed AS_OF, and the tasks only change the page; Keep Pro answers that nothing was charged. To wire it, set AS_OF and the seconds left from your server, send each finished task to your billing provider as a trial extension, and make Keep Pro open your checkout. Compute the end date on the server too, so the clock and the invoice agree.
Can I stop the clock, and what happens under reduced motion?
Yes. Pause stops the one-second tick at once and Resume starts it again, with the same button, so focus stays on it. Anyone who asked their system for less motion gets a still clock: it starts paused and only moves after Resume. The end date never changes while the clock runs, only when a task is ticked.
How is the clock read by a screen reader?
The clock has the role of a timer with a name that gives the time left in days and hours, or hours and minutes, and changes only when a minute passes. It is not a live region, so it never chatters; ticking a task or pausing is announced once by the polite status message, which says how many days were added and when the trial now ends.
How do the tasks add days?
Each task has a days value in TASKS. The days added are the sum of the ticked tasks, the clock's total is the starting duration plus those days, and the end date is the fixed moment plus the same total, so the three always agree. Unticking a task takes its days back. The cap of seven is the sum of the three tasks.