# Time zone label

> Event time in the venue's time zone, shown in the trigger, with a footer that leaves out Now.

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-time-picker-9).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-time-picker-9
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-time-picker-9-light-67cdc47e891e6129.png
- Registry item: https://reui.io/r/new-york-v4/c-time-picker-9.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-time-picker-9.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `field`, `@reui/time-picker`

## Files

### `c-time-picker-9.tsx`

```tsx
import {
  TimePicker,
  TimePickerClear,
  TimePickerColumns,
  TimePickerConfirm,
  TimePickerContent,
  TimePickerFooter,
  TimePickerTrigger,
  TimePickerValue,
} from "@/components/reui/time-picker"

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

export function Pattern() {
  return (
    <div className="w-full max-w-xs">
      <Field>
        <FieldLabel id="doors-open-label" htmlFor="doors-open">
          Doors open
        </FieldLabel>
        {/* The zone is a fixed label, not a conversion: the value is the
            venue's wall-clock time. The label and the value name the trigger,
            so the zone joins them as its description. */}
        <TimePicker
          id="doors-open"
          defaultValue="19:30"
          aria-labelledby="doors-open-label"
          aria-describedby="doors-open-zone doors-open-description"
        >
          <TimePickerTrigger>
            <TimePickerValue />
            <span
              id="doors-open-zone"
              className="text-muted-foreground ms-auto"
            >
              Berlin time
            </span>
            {/* Children replace the default value and clock, so the clock is
                added back; `data-icon` keeps the button's end padding. */}
            <span
              data-icon="inline-end"
              aria-hidden="true"
              className="text-muted-foreground flex"
            >
              <IconPlaceholder
                lucide="ClockIcon"
                tabler="IconClock"
                hugeicons="ClockIcon"
                phosphor="ClockIcon"
                remixicon="RiTimeLine"
                aria-hidden="true"
              />
            </span>
          </TimePickerTrigger>
          <TimePickerContent>
            <TimePickerColumns />
            {/* No Now: it would read the viewer's clock, not the venue's. */}
            <TimePickerFooter>
              <TimePickerClear />
              <TimePickerConfirm />
            </TimePickerFooter>
          </TimePickerContent>
        </TimePicker>
        <FieldDescription id="doors-open-description">
          Shown on every ticket in venue time, wherever the buyer is.
        </FieldDescription>
      </Field>
    </div>
  )
}
```