---
title: "Opening Hours — Free Framer component · Best of Framer"
description: "Free Framer component · by Vitor Farago · Interactive. Live open/closed for any venue."
canonical: "https://framer.elliotli.dev/component/opening-hours"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Opening Hours

# Opening Hours

Live open/closed for any venue.

[View on Framer](https://framer.com/marketplace/components/opening-hours/?via=elliot-li)

![Opening Hours preview image 1](https://framer.elliotli.dev/og/component/opening-hours/d1b47ec3f6e1c810/1600x1200.jpg)

## Summary

Live open/closed for any venue.

## Description

A live open / closed badge for any business with a door — restaurants, bars, cafes, clinics, salons. It reads your weekly schedule and tells visitors whether you are open right now, and when you open next if you are not.

**Built for the two cases that break other versions of this**

Your timezone, not the visitor's. A badge built on the browser clock shows your London cafe as closed to someone browsing from New York. Every reading goes through the venue's own timezone, so the status is the same anywhere in the world.

Hours that pass midnight. A bar open 18:00–02:00 is what most implementations get wrong: they test whether the time is before closing, which fails at 20:00, and the badge says closed while the room is full. Here a closing time earlier than the opening time runs into the next day, so 00:30 on a Saturday still reads as open, on Friday's hours.

### Four states, your words

Open, Closing soon, Closed, Opening soon. You set how far ahead each "soon" state begins and write what it says. Drop {opens}, {closes} and {day} in for the real times. Day names, "today" and "tomorrow" are editable, so it speaks any language.

### Your hours

The same hours every open day, or a different set per weekday, each with an optional break. A closing time earlier than the opening time means you trade past midnight.

### Built properly

It never breaks pre-render, stays blank until the clock is read rather than showing a wrong "Closed", and drops its timer in a hidden tab. The status never depends on color alone.

### Properties

Timezone, per-day hours with breaks, 24h or 12h, four editable messages, layout, dot size and colors, and full font controls. A Preview switch holds any state so you can design it.

**Support**

Questions? Write to vitorcoc008@gmail.com

## Rank history [How rankings work →](/terms#rankings)

-   All · #7074

## Details

- **Author**: Vitor Farago
- **Published**: 2026-09-03
- **Updated**: 2026-09-24
- **Added**: 2026-09-03
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase