HelpTribe.

HT|UI

OfficeCard

World clock card for displaying global office locations with real-time local time, timezone info, and open/closed status indicators.

Installation

$ npx shadcn@latest add office-card

Preview

🇪🇸Spain

Madrid

Open

14:32:18

Local Time (Madrid)

Multiple Offices

🇪🇸Spain

Madrid

Open

14:32:18

Local Time (Madrid)

🇺🇸USA

New York

Closed

08:32:18

Local Time (New York)

🇵🇰Pakistan

Islamabad

Open

17:32:18

Local Time (Karachi)

🇦🇪UAE

Dubai

Open

16:32:18

Local Time (Dubai)

Usage (React/TSX)

import { OfficeCard } from "@/components/ui/office-card"

const offices = [
  { city: "Madrid", country: "Spain", flag: "🇪🇸", timezone: "Europe/Madrid" },
  { city: "New York", country: "USA", flag: "🇺🇸", timezone: "America/New_York" },
  { city: "Islamabad", country: "Pakistan", flag: "🇵🇰", timezone: "Asia/Karachi" },
  { city: "Dubai", country: "UAE", flag: "🇦🇪", timezone: "Asia/Dubai" },
]

export default function GlobalOffices() {
  return (
    <div className="grid grid-cols-4 gap-4">
      {offices.map(office => (
        <OfficeCard
          key={office.city}
          {...office}
          time={getCurrentTime(office.timezone)}
          status={getStatus(office.timezone)}
        />
      ))}
    </div>
  )
}

Props

Prop	Type	Default	Description
city	string	—	The city name.
country	string	—	The country name.
flag	string	—	Emoji flag for the country.
timezone	string	—	IANA timezone string (e.g., 'Europe/Madrid').
time	string	—	Formatted time string to display.
status	{ open: boolean, text: string }	—	Office status with open state and display text.
className	string	—	Additional CSS classes to apply.