Timezone Picker

Searchable IANA time zone select showing each zone's UTC offset and current local time.

@drift-ui/timezone-pickerRegistry JSONGitHubOpen in v0

Keyboard

↑↓
Move through zones
Enter
Pick the zone

The CLI also installs the npm packages and registry items it builds on, and reads the style in your components.json to pick the Base UI or Radix build.

timezone-picker-usage.tsx
"use client"

import { useState } from "react"
import { TimezonePicker } from "@/components/ui/timezone-picker"

export function TimezoneSetting() {
  const [timeZone, setTimeZone] = useState("Europe/London")

  return <TimezonePicker aria-label="Time zone" value={timeZone} onValueChange={setTimeZone} />
}

TimezonePicker

A button that opens a searchable list of IANA time zones, each with its UTC offset and current local time. In the list, arrow keys move, Enter selects, and Escape closes it and returns focus to the button.

Prop
valuestringControlled IANA time zone name.
defaultValuestringDefault""Initial value when uncontrolled.
onValueChange(value: string) => voidCalled when a time zone is picked.
timeZonesstring[]Default"every zone the browser supports"Limits the list to these IANA names. The default comes from Intl.supportedValuesOf("timeZone"), with UTC added if missing and old names such as Asia/Calcutta shown under current ones. Names passed here get the same renaming, and duplicates are dropped.
placeholderstringDefault"Select a time zone"Shown while no zone is selected.

Other props go to the <button>.

Start from the user's zone

Read Intl.DateTimeFormat().resolvedOptions().timeZone on the client and pass it as value. The server cannot know the visitor's zone, so it renders the placeholder.

A short list

timeZones limits the list to the IANA names you pass, still sorted by UTC offset.

components/ui/timezone-picker.tsx
CtrlK