shadcn.io is not affiliated with official shadcn/ui
Time Zone Axis Team Block for React Aria
Ten people of a remote-first payroll company laid along an axis of UTC offsets, each office with its avatars, a live local time and a shaded band where it is working time, over six cells that list the same zones.
Installation
Overview
A time zone view for React with React Aria, for Longwater, a remote-first payroll company. A compact header says there are ten people in six time zones and when the most of them overlap, worked out from the data. Under it a framed figure draws an axis of sixteen hourly columns from UTC-6 to UTC+9: each office's people are stacked in their column as initials avatars over a live local time and the city, and the columns where it is 09:00 to 17:00 at the moment are shaded, so the working band slides along the axis through the day. Under the figure, six cells that share their hairlines list the same zones in words: the city, its offset, its local time, whether it is working time, and who works there. The local times are read from your clock after the page loads. Below lg the drawing is dropped and the cells carry the block. It's built from Avatar and Guides, with your theme's tokens for every colour. For a remote-first team's about page or a contact page that sets expectations about reply times. The people are invented.
FAQ
How do I change the offices and people?
Edit ZONES at the top of the file: each office is a city, an offset in minutes east of UTC (330 for India) and its people, each with a name and a role. The axis runs from UTC-6 to UTC+9 (FIRST_OFFSET and COLUMNS); widen it for offices further out. The overlap sentence in the header is worked out from the data.
How does the live clock and the shaded band work?
The browser's clock is read once the page has loaded and again every half minute. Until then the times read "--:--" and no band is shaded, so the server and the browser render the same thing. A column is shaded when the local time there, at the current UTC time, is between 09:00 and 17:00 (WORK_START and WORK_END). Nothing animates, and the shading only changes colour, which reduced motion turns off.
What about daylight saving?
The offsets are fixed, which is why the example offices are in places that keep one offset all year (Mexico City, São Paulo, Accra, Lagos, Chennai, Seoul). An office that changes its clocks needs its offset changed twice a year.
What does a screen reader hear?
The drawing is hidden from assistive technology: the six cells carry the same facts, as an ordered list with a name ("Longwater's offices, with the time in each"), each city a heading and its local time in a time element. The word beside the dot ("At work" or "Off hours") is written out, never colour alone.
Why is there no axis on a phone or a tablet?
Sixteen columns need about 700 pixels, so below lg the drawing would have to scroll sideways, and an aria-hidden scroller can't be reached by keyboard. The list of cells says everything the drawing does, so it takes over: one column on a phone, two from sm.