Pro
Timezone select
Choose a time zone by city, region or offset. Every zone the browser knows is listed by region and offset, the reader's own zone is offered first, and the field says what time it is there and how far that is from you.
pnpm dlx shadcn@latest add @caliper/timezone-selectWhen to use
Use it for
- Profile and workspace settings, scheduling and reports that run at a local time.
- Anywhere people pick a zone for someone else.
Skip it when
- Showing several clocks at once; that is a world-clock display.
- Choosing a time, which is the time picker's job.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Checked against now
- "14:02 there, 3h 30m ahead of you" turns an abstract zone name into something people can verify.
- Same on server and client
- Offsets depend on the reader's clock, so the first render lists cities only and adds offsets after hydration.
Installation
pnpm dlx shadcn@latest add @caliper/timezone-select
Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source. It is built from TimezoneSelect and zoneOffset.
import { TimezoneSelect, zoneOffset } from "@/components/ui/timezone-select"
The worked example comes with Pro
The 24-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
TimezoneSelect
component
zoneOffset
component
No props of its own; it accepts the native props of its root element.
Accessibility
It is built on native elements and keeps aria-live in step with state. Changes that matter are announced through a live region.
No custom key handling; Tab and the native activation keys do the work.
Motion
Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.