React Dialog Block World Clock

Track time across the globe instantly. This React world clock dialog provides multiple timezone displays with city names, automatic time difference calculation from local time, live updating current times, and easy city search to add new locations. Built with shadcn/ui Dialog, Input, Button, and ScrollArea components using Tailwind CSS, users monitor multiple time zones with clear visual presentation. Add cities, view times, calculate differences—perfect for remote team coordination, travel planning, international business, or any Next.js application where tracking multiple time zones helps users stay synchronized globally.

React Dialog Block World Clock preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-world-clock.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-world-clock.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-world-clock.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-world-clock.json

Related Components

FAQ