Global offices on a dotted world map with pulsing city markers and arcs from headquarters. Hovering or focusing a city opens its address card, synced with a list showing each office's local time.
Offices
Drop by for coffee or a whiteboard session. Every office keeps a desk free for customers and a fridge full of cold brew.
500 Howard Street, Floor 4, San Francisco, CA 94105, United States. Closed now.
npx shadcn@latest add https://hyperblur.dev/r/contact-offices.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/contact-offices.tsx.
import { ContactOffices } from "@/components/hyperblur/contact-offices"
<ContactOffices defaultActive="lon" onOfficeSelect={(office) => console.log(office.city)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Offices" | Small label above the title. |
| title | string | "Eight cities, one team" | Section heading. |
| subtitle | string | "Drop by for coffee or a whiteboard session..." | Paragraph beside the heading. |
| offices | { id; city; country; label; address: string[]; timeZone; email; lon: number; lat: number }[] | 8 offices | Offices to plot. The first one is treated as headquarters and arcs start from it. timeZone is an IANA zone used for the local time and the open now badge. |
| defaultActive | string | Id of the office whose card is open at first. Defaults to the first office. | |
| footnote | string | "Plus 140 people working remotely across 23 countries" | Line at the bottom of the map card. |
| onOfficeSelect | (office: ContactOffice) => void | Called when another office becomes active from the map or the list. | |
| accent | string | "#22d3ee" | Marker, arc and highlight color. |