Select
Timezone Clock Select
A timezone select: every option in the open panel, and the trigger itself, carry the city's live current time, ticking once a second.
React + Tailwind, shadcn-compatible: press “Copy for AI” and your Cursor or Claude Code agent installs it with the shadcn CLI.
What you can change
- the zones array (value, label, timeZone) and its copy
- the field caption through label
- the initial value through defaultValue
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.club/c/select-016?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
How to use
<Select016
label="Timezone"
defaultValue="london"
/>A sample call. The agent installs the component itself from the registry via the “Copy for AI” link.
Settings
- Label
label· default: Timezone- Value
defaultValue· default: london- Accent
accent· default: theme colour- Clock locale
locale· default: en-GB- Background
background· default: theme colour
More in Select
FAQ
- How do I add Timezone Clock Select with Cursor or Claude Code?
- Press “Copy for AI” on this page and paste it into your agent's chat. The instruction contains the shadcn CLI install command, the dependencies and what to keep, so the agent installs this exact component instead of recreating a lookalike.
- What does Timezone Clock Select depend on?
- No npm packages beyond React and Tailwind CSS.
- What can I change in Timezone Clock Select?
- Adapt: the zones array (value, label, timeZone) and its copy; the field caption through label; the initial value through defaultValue. Keep as installed: the local --vibeui-select-016-* palette — do not swap it for your theme tokens; formatting through Intl.DateTimeFormat with the option's timeZone — the only reliable way to get a zone's time without a date library; the deferred first tick via setTimeout(0) inside the effect instead of a synchronous setState — otherwise the effect cascades a re-render right on mount.
- Is Timezone Clock Select free?
- Yes. The preview is open without an account; with a free account you can copy up to 20 components a month.
For developers
npx shadcn@latest add https://vibeui.club/r/pro/select-016.jsonThis command needs a signed link: sign in and open “Component source” below — it issues a working link valid for 30 minutes. All install options
Technical notes
Client component: useState holds the selected zone, whether the panel is open, the highlighted index and the current time (null to begin with). useEffect starts an interval once a second and the first tick through setTimeout(0) rather than a synchronous call in the effect body — that avoids a cascading render right on mount. Until the first tick the field shows "--:--", so as not to diverge from the server rendering (Date is computed on the client only). The time is formatted with Intl.DateTimeFormat using the option's timeZone — a separate timezone per option, without date libraries. The trigger button and the role=listbox panel are arranged as in select-013/014: a native option cannot draw a second column with the clock. The palette lives in --vibeui-select-016-*.
Tags
- select
- timezone
- clock
- form
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…