## World Clocks (S—225)

A list of city clocks with day/night markers and offsets from you; add a city from search and remove with a tap.

- URL: https://sundaeui.dev/components/world-clocks
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/world-clocks.json`
- Tags: remote-team, time-zones, list, cities, time, world-clock

Each row shows the city’s time, its offset from your clock (“+5h, tomorrow”) and whether it is working hours there.
Add a city through search; rows reorder by offset. Times tick every minute.

### Usage

```tsx
import { WorldClocks } from '@/components/sundae/world-clocks'

<WorldClocks />
```

### Props

- `zones` (`{ city: string; tz: string }[]`, required): Cities.
- `hour12` (`boolean`, default `true`): 12-hour clock.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Remote team tools, scheduling, travel apps.

### When not to use

- Picking a meeting time: use a time-zone slider.

### Accessibility

- Each row reads “Tokyo, 11:42 pm, 9 hours ahead, tomorrow”.
- Search is a combobox with a listbox of cities.
- Reduced motion removes the movement and keeps every state change.