shadcn.io is not affiliated with official shadcn/ui
World Clock Command Menu Block for Vue
A meeting planner's command menu shown open over a drawn meeting: fourteen cities, a slider that moves the meeting time in 15-minute steps and re-reads every city's local time and day, a star to pin and Enter to add or remove a city.
Installation
Overview
Plan a meeting across time zones with this world clock command menu for Vue with Ark UI. It opens from a drawn meeting in Sundial Row, a meeting planner, whose header holds an outline field with its ⌘ K cap, and the meeting is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command over fourteen cities with a Slider under the list, "Meeting time", that moves the meeting through 14 Oct 2026 in 15-minute steps from a fixed 09:00 UTC. Every row re-reads its city's local time with Intl.DateTimeFormat and its time zone, shows a "+1 day" or "−1 day" marker when the date differs and says in words whether it is within 9 to 18, before 9 or after 18. Enter adds the city to the meeting or takes it off, the star or Alt P pins it to the top, and the drawn meeting shows each city's day as a bar with its working hours shaded and the meeting time marked. No clock ticks. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same cities, slider and query. For scheduling tools, team pages and any app that has to say what time it is somewhere else.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of a meeting, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a slider position or a pin in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How does the slider move every city?
The slider holds minutes after midnight UTC on the meeting's date, from 00:00 to 23:45 in steps of 15. localOf turns that instant and a city's zone into its local clock, its minutes since midnight and its date difference, with a cached Intl.DateTimeFormat per zone, so daylight saving is the time zone database's business, not the block's. The slider is a real range input with the readout "09:00 UTC", and its spoken value is the same text.
What do the day marker and the hours words mean?
"+1 day" or "−1 day" appears when the city's local date differs from the meeting's UTC date. The line under the city's name says "Within 9 to 18" when its local time is from 09:00 up to, but not including, 18:00, otherwise "Before 9" or "After 18". These words, not a colour, carry the answer; the drawn bar's shaded stretch is a second view of it.
Why do the times appear a moment after the page loads?
Intl can format differently on the server and in the browser, which would break hydration. The block renders dashes first and reads the local times once the page is in the browser, in an effect that sets ready. The rows keep their size either way, so nothing moves when the times arrive.
What stays local, and how do I wire it?
All of it. The cities, the starting meeting and the date are typed constants, adding a city only changes state, and the time comes from the slider, never from the clock. In your app set BASE from the meeting's real date, load CITIES from your directory of people, and save the chosen cities and the time in pick.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the cities, Enter adds or removes one, Alt P pins it, and Tab reaches the Meeting time slider, whose arrow keys move it by 15 minutes. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.