shadcn.io is not affiliated with official shadcn/ui
Time Zone Account Block for React
Choose the time zone an account's records are written in with a combobox over ten zones or a switch that follows the device, and see three sample records at fixed instants printed in that zone beside the same instant in UTC.
Installation
Overview
Let people pick the time zone their account's records are written in, and show what it does before they save, with this time zone panel for React with Base UI. A hairline frame with a plus mark on each corner holds two bands. The first has a Switch that follows the device, with the detected zone typed beside it, and a Combobox over ten zones that narrows as you type by city, country or zone name; choosing another zone leaves the switch off, and a line says "Records are written in Lisbon time (UTC+1)". The second shows three sample records at fixed instants, each as the chosen zone prints it beside the same instant in UTC, and a line says that exports and API responses are always stamped in UTC. The last band counts unsaved changes beside a Shine Button to save them and an outline Button to discard them. It's built from Combobox, Switch, Button, Shine Button and Guides, with a CSS entrance only. For the account or preferences page of a product that shows people when things happened.
FAQ
How do I change the zones, the detected zone and the sample records?
Edit the constants at the top. ZONES lists each zone by its name, a city and a country, DETECTED is the zone the device reports (read it from Intl.DateTimeFormat().resolvedOptions().timeZone in your own app) and SAMPLES holds the records as fixed UTC instants. Everything shown is worked out from those, so the combobox, the search and the sample lines never disagree.
Why do the times show dashes for a moment?
Because the browser's Intl.DateTimeFormat prints zones and offsets from the machine's own time data, and the server's can differ from the visitor's. The block prints the dashes first and the real times once it has mounted, so the page never flashes a wrong time or logs a hydration mismatch. Daylight saving comes from the same data: Sydney is already on summer time in the October samples and London is not.
How does the combobox behave?
Typing narrows the list by city, country or zone name, ignoring case and accents, and "No zone matches" appears with the way back when nothing fits. Picking a zone writes it to the draft and turns the switch off; turning the switch on puts the detected zone back. The input is a real combobox, so the arrow keys move through the list, Enter picks and Escape closes it on every target.
What stays local, and how do I make it real?
All of it. Save keeps the choice in this page and says "Saved 2 changes in this demo. Nothing is stored." To make it real, store the zone name and the follow-the-device flag on the account, format every timestamp with that zone in your UI, and keep stamping exports and API responses in UTC, as the note in the block says.
Is it accessible, and how does it look on a phone?
The switch and the combobox have visible names, each sample is a time element with its instant, the offsets are printed in text, and the foot is a polite live region. Times are set left to right inside a right-to-left page. On a phone the two bands stack, each sample keeps its local time and its UTC value on two short lines, and the foot with Save stays pinned to the bottom of the screen.