Contact Offices
Office cards with each city's local time and whether the studio is open right now.
- Type: Contact section
- Styles: Dark, Light
- Licence: Charcoal UI Pro
About Contact Offices
Contact Offices shows each studio or shop as a photo card with the city, address and its local time ticking, plus an open or closed badge worked out from that city's opening hours.
It is a full-width contact section for React and Tailwind CSS 4, in a dark and light style. Preview it at any width above, then install it with one command.
When to use Contact Offices
- Multi-location studios and agencies.
- Shops and cafés with branches.
- Coworking spaces.
- Clinics and universities.
How it is built
Times use the browser's time zone support, open hours default to nine to six and can be set per office, and the clock renders after mount to avoid hydration mismatches.
It is composed from Live Dot, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with Contact Offices
Contact Offices is part of 7 full templates, so you can see it in a finished page.
- Plinth template: Buildings, told like stories.
- Marginalia template: An independent bookshop, online.
- Kinfolk template: Bread, coffee and three neighbourhood shops.
- Brightside template: A dentist people don't dread.
- Lotus template: Classes, teachers and a timetable.
- Hive template: Desks, rooms and people worth sitting near.
- Crew template: A careers page people apply from.
- Contact Form: A React contact form with topic pills, inline validation and a success state
- Contact Booking: A React book-a-demo section with a calendar, time slots and confirmation
- Contact Support: A React support hub with live channel status, reply times and system status
- Live Dot: A React presence dot with a pulsing halo for live, busy, away and offline
Install Contact Offices
npx shadcn@latest add @charcoal/contact-officesContact Offices is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Contact Offices work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.
Built from
- Live Dot: A presence dot with a pulsing halo in the four states an indicator needs: live, busy, away, offline. CSS only.