shadcn.io is not affiliated with official shadcn/ui
Overlap Hours About Block for React
An about section for a time-zone scheduler: three offices on a 24-hour axis, with the hours they all share labelled and counted.
Installation
Overview
An overlap-hours section for React with Base UI, written for Zonekeeper, a fictional time-zone scheduler. A short header states how many hours every office is open at once. Under it, a framed chart draws three offices on one UTC axis: each works 09:00–17:00 in its own zone, and a tint marks the stretch where the three bars overlap. The length of that stretch is computed from the bars, not typed beside them, and a caption repeats it in words. Three remote principles follow as a numbered list. On a narrow screen the axis scrolls sideways inside the frame. The page's rails and top rule come from the Guides spine. It's built from Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that explains how a distributed company decides when it is allowed to meet. The offices and the hours are example data.
FAQ
How do I change the offices?
The offices are OFFICES at the top of the file. Each has a city, an offset label and a start and end hour on the UTC axis. Local hours are the constant LOCAL, the same at every office. The overlap is OVERLAP_END minus OVERLAP_START: the earliest end minus the latest start. Change a start or an end and the tint, the "hours" label and the caption all move together.
How is it read by a screen reader?
The heading is the section's only h2. The chart is a figure whose caption states the overlap in words, and each office row has a visually hidden line with the city, the local hours, the offset and the UTC window, so the bars are not the only source of the numbers. The principles are an ordered list of h3 headings. The axis ticks are decorative. The lines are drawn by a layer hidden from assistive technology.
How do I reach the axis with a keyboard?
On a narrow screen the axis is wider than the frame and scrolls sideways. The scrolling region is a tab stop with a visible focus ring and the name "Working hours of three offices on a UTC axis". From lg the axis fits, and the same region is still a tab stop.
How does it fit on a phone?
The chart keeps a minimum width and scrolls inside the frame, so the bars stay readable instead of shrinking to a few pixels. The three principles stack under the caption. The heading wraps. Nothing else scrolls sideways at 320 pixels, and in a layout that runs the other way the chart stays on a UTC axis.
Related
- Pro
Timetable Day in the Life About
Culture and valuesOne person's Tuesday as a timetable: three lanes (Focus, Meetings, Support) over the working day, with blocks you pick to read what each one was for.
- Pro
Settings Panel Work Style
Culture and valuesA working-agreements section drawn as a settings panel: six agreements as rows with a drawn switch, the state in words and a line on why, in a tinted frame beside the title.
- Pro
Culture Rituals About
Culture and valuesA team's rituals sorted by how often they happen: three bands, every week, every quarter and every year, each with three cells that say what the ritual is, who comes and how long it takes.
- Pro
Team Breakdown Bars About
Team and officesA team counted three ways in 100% bars (by function, location and tenure), where choosing a segment in the legend names its share and count under the bar.
- Pro
Benefits About
CareersA payroll company's own benefits, switched by office: four columns for Health, Money, Time and Growth, with the wording swapping in place and a row of figures underneath.
- Pro
Situation Tabs Operating Principles
Principles and processAn operating-principles section for an accounting-automation company: line tabs by situation, and under them the open situation's three rules as hairline rows, each with the question we ask.