shadcn.io is not affiliated with official shadcn/ui
Overlap Hours About Block for Ark UI
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 Ark 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.