Your Business Name
Skip to main content

BusinessHours - Always Up-to-Date

Your operating hours with smart features: real-time status, current day highlighting, and timezone handling. No manual updates needed.

See LayoutsView Code Examples

More Than Just Hours

This isn't just a static list. The BusinessHours component shows real-time status ("Open Now" or "Closed"), highlights the current day, and handles timezone differences so visitors worldwide see accurate information.

List Variant (Default)

Best for: Contact pages, sidebars, location pages

Full 7-day table with current day highlighted and status indicator.

Closed
Monday 9:00 AM - 5:00 PM
Tuesday 9:00 AM - 5:00 PM
Wednesday 9:00 AM - 5:00 PM
Thursday 9:00 AM - 5:00 PM
Friday 9:00 AM - 5:00 PM
Saturday 10:00 AM - 3:00 PM
Sunday Closed
Show Code 
<BusinessHours variant="list" />

Compact Variant

Best for: Footers, headers, space-constrained areas

Condensed summary: "Mon-Fri: 9am-5pm, Sat: 10am-3pm, Sun: Closed"

Closed
Monday-Friday: 9am-5pm
Saturday: 10am-3pm
Sunday: Closed
Show Code 
<BusinessHours variant="compact" />

Without Status Indicator

Use showStatus={false} to hide the "Open Now" badge.

Monday 9:00 AM - 5:00 PM
Tuesday 9:00 AM - 5:00 PM
Wednesday 9:00 AM - 5:00 PM
Thursday 9:00 AM - 5:00 PM
Friday 9:00 AM - 5:00 PM
Saturday 10:00 AM - 3:00 PM
Sunday Closed
Show Code 
<BusinessHours variant="list" showStatus={false} />

Configuration

Update Business Hours & Timezone

Edit src/config/business.js: 

export default {
  timezone: 'America/Los_Angeles', // Your business timezone
  hours: {
    monday: '9:00 AM - 5:00 PM',
    tuesday: '9:00 AM - 5:00 PM',
    wednesday: '9:00 AM - 5:00 PM',
    thursday: '9:00 AM - 5:00 PM',
    friday: '9:00 AM - 5:00 PM',
    saturday: '10:00 AM - 3:00 PM',
    sunday: 'Closed',
  },
  // ... other config
};

BusinessHours Features

Real-Time Status

Shows "Open Now" or "Closed" automatically

Timezone-Aware

Uses business timezone, not visitor timezone

Current Day

Highlights today with theme color

Two Layouts

List (full week) or compact (grouped)

Add Hours to Your Site

Show customers when you're open. Real-time updates, timezone handling, and current day highlighting included.

See All Business Components Back to Components