Countdown
The days, hours, minutes and seconds left until a launch, a sale's end or an event's doors, as one <time> naming the moment.
Rendered from a fixed now
Ticking from your clock
After the moment
View code
<Countdown to="2027-04-15T06:30:00Z" now="2027-01-01T09:00:00Z" done="Doors are open" />
<div style="--ui-countdown-value-size: 2.5rem; --ui-countdown-value-color: var(--ui-brand-fg)">
<Countdown to="2027-04-15T06:30:00Z" done="Doors are open" aria-label="Time left until the doors open" live />
</div>
<Countdown to="2026-04-16T06:30:00Z" done="Doors are open" />Demo landings
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- MarginAn invented AI note-taker for recorded meetings: summaries, decisions and to-dos that each link to the transcript line they came from./demo/ai
- RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
- Hollyhock BakeryHollyhock Bakery on Alder Street: today's bake, the menu and prices, opening hours that know the time, pickup orders, directions, step-free access and parking./demo/bakery
- The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
- Overprint 2027Overprint is one day of talks on what browsers ship, in two rooms of an old foundry in Rotterdam, on Thursday 15 April 2027./demo/conference
- CenteredCentered is a video course in wheel-throwing pottery: 24 lessons in six modules with chapters and transcripts, self-paced or with a cohort, ending in a lidded jar./demo/course
- Strata TwoStrata Two is a 75% keyboard in a one-piece aluminium case with a gasket-mounted plate. Preorder batch 03 for $279, shipping 9 March 2027./demo/hardware
- plumbPlumb compiles a TypeScript schema to straight-line JavaScript once, so parsing runs the checks you would have written by hand./demo/library
- UndercurrentA fortnightly letter and podcast about the water mains, power lines, signals and post under an ordinary day, read aloud with the people who run them./demo/newsletter
- KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
- QuoinQuoin designs and builds everyday software for transit, libraries and makers, and measures what it changed. Booking from March./demo/studio
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { Countdown } from "@sdxc/ui/landing";The time left from now as a <time datetime> that reads true with no script; live hydrates
CountdownLive (map it in the browser entry) to tick on the viewer's clock. Type it with
--ui-countdown-value-{font,size,weight,color}, --ui-countdown-label-{font,size} and --ui-countdown-{gap,align}.
Examples
<Countdown to={launch} done="Live now" labels={{ days: "días" }} live />Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
to | DateInput | Yes | The moment counted down to. |
now | DateInput | No | The moment counted from; pass the request's time so server and tests render the same text. |
labels | Partial<Labels> | No | Unit names, merged over the English ones. |
seconds | boolean | No | Shows the seconds unit and ticks every second; off, the minutes are the smallest unit. |
done | string | Yes | What the countdown reads once the moment has passed, such as "Doors are open". |
live | boolean | No | Hydrates CountdownLive, which counts from the viewer's clock every second. Needs @sdxc/ui/landing/countdown#CountdownLive in the app's browser entry. |
"aria-label" | string | No | Accessible name for the <time>. |
id | string | No | Element id for the <time>. |