A status pill that reads a weekly schedule and shows Open now, Closing soon, Opening at or Closed today, with overnight ranges, holidays and time zones. Ships a pure getOpenStatus helper.
Corner Kitchen
Pick a location for pickup
npx shadcn@latest add https://hyperblur.dev/r/open-now-badge.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/open-now-badge.tsx.
import { OpenNowBadge } from "@/components/hyperblur/open-now-badge"
<OpenNowBadge timeZone="America/New_York" hours={[{ day: 5, open: "18:30", close: "02:00" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| hours | { day: number; open: string; close: string }[] | Tue to Sun, Mondays closed | Weekly ranges, day 0 is Sunday, times as HH:MM. Several ranges per day are fine, and a close earlier than the open runs past midnight. |
| closedDates | string[] | Dates as YYYY-MM-DD in the store time zone when the store stays closed. | |
| timeZone | string | IANA time zone of the store, for example "America/New_York". Defaults to the visitor clock. | |
| now | Date | string | Fixed moment used instead of the clock, for previews and tests. | |
| soonMinutes | number | 30 | Minutes before closing that switch to Closing soon. |
| hourCycle | 12 | 24 | 12 | Time format in the label. |
| size | "sm" | "md" | "lg" | "md" | Pill size. |
| variant | "soft" | "outline" | "solid" | "soft" | Tinted, bordered or filled style. |
| appearance | "dark" | "light" | "dark" | Text color base for dark or light backgrounds. |
| compact | boolean | false | Short labels only: Open, Closing soon, Opens 6:30 pm, Closed. |
| accent | string | "#7fb3ff" | Color of the Opening at state. |
| labels | Partial<OpenNowBadgeLabels> | English copy | checking, open, openShort, until, closingSoon, openingAt, opensShort, closed, closedToday, opens, tomorrow, am, pm and days (7 names from Sunday). Templates use {time} and {day}. |
| onStatusChange | (status, result) => void | Called when the computed status changes. | |
| className | string | Extra classes on the pill. | |
| style | React.CSSProperties | Inline styles on the pill. |