How to show opening hours and an "Open now" status on your website

For cafés, clinics, shops and offices, "are they open right now?" is one of the first questions a visitor has. A small hours widget with a live status answers it before they reach for Google Maps. This tutorial uses ReactFrame's free Business Hours widget.

1. Install

npx shadcn@latest add @reactframe/business-hours

2. Add your hours

import { BusinessHours } from "@/components/business-hours";

const days = [
  { day: "Monday", hours: "08:00 AM - 06:00 PM" },
  { day: "Tuesday", hours: "08:00 AM - 06:00 PM" },
  { day: "Wednesday", hours: "08:00 AM - 06:00 PM" },
  { day: "Thursday", hours: "08:00 AM - 06:00 PM" },
  { day: "Friday", hours: "08:00 AM - 10:00 PM" },
  { day: "Saturday", hours: "10:00 AM - 02:00 AM" },
  { day: "Sunday", hours: "Closed" },
];

export function VisitUs() {
  return (
    <BusinessHours
      title="Visit Moda Roasters"
      headerTitle="Opening hours"
      days={days}
      timeZone="Europe/Istanbul"
      address="Moda Cd. 12, Kadıköy, İstanbul"
      phone="+90 216 123 45 67"
      directionsUrl="https://maps.google.com/?q=Moda+Roasters"
    />
  );
}

Write hours as "HH:MM AM - HH:MM PM" (with the spaces around the dash) and use "Closed" for days off. Late nights work too: Saturday above runs from 10 AM to 2 AM.

3. Set the time zone

timeZone is the business's IANA time zone ("Europe/Istanbul", "America/New_York", "Asia/Tokyo"). With it, the Open now badge follows the shop's clock, so a visitor browsing from another country still sees the right status. Without it, the status follows the visitor's own clock, which is only right for people in the same time zone.

4. Style it

• theme ("dark" or "light"), and showThemeToggle to let visitors switch.
• backgroundImage or backgroundVideo for a photo of the place behind the card.
• openText and closedText to translate the badge, for example "Şu an açık" / "Kapalı".
• showDirectionsButton with directionsUrl for a one-tap route in Maps.

Keep it in sync with Google

Use the same hours as your Google Business Profile. Mismatched hours are a common reason for bad reviews, and search engines compare them. If you use structured data, openingHoursSpecification on your LocalBusiness schema should match too.

Related

For a full local business page, pair it with reviews from the Review widgets collection and a chat button from Chat widgets.