Opening hours

A shop's weekly hours in one quiet row — « Open now · closes at 5 pm » and today's hours — that unfolds into the whole week, today highlighted.

Web · ✓Mobile · n/aDesktop · ✓BetaData display

import { OpeningHours } from "@krizaka/ui/opening-hours";

Open nowCloses at 5 pm8 am – 12 pm, 1 pm – 5 pm

Web only — React, from @krizaka/ui/opening-hours. Beta: its API may still change in a minor version.

Why it is here. Used by Akinaza.

When to use

A shop's page or a place's card: when it is open now, and the week for whoever wants it.

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { OpeningHours } from "@krizaka/ui/opening-hours";

Open now, closing at 5 pm, with the week unfolded and Tuesday marked.

Open nowCloses at 5 pm8 am – 12 pm, 1 pm – 5 pm

The weekly hours in one row — open now, closes at… — that unfolds into the week, today highlighted.

Prop	Type	Default	Description
`days`required	`readonly OpeningDay[]`	—	The week, in reading order.
`label`required	`string`	—	The name of the list (`Hours`), passed translated.
`status`required	`OpeningStatus`	—	Open or closed right now, in words.
`today`	`string`	—	The id of today's day: its row is marked (`aria-current="date"`) and its hours show on the closed row.

A native details: the summary is the one control, named by the status, the detail and label.
Today's row is aria-current="date"; the status dot is decorative, the words say open or closed.

Keys	Action
`Enter or Space`	Unfolds or folds the week (a native disclosure).

Compute status from the hours, the shop's time zone and the current time on the server; the block only lays it out.
Pass each day's hours already formatted, with your word for closed when there are none (Closed).
Name today (today) so its row is marked; the closed row then shows today's hours on a wide screen.
Keep the row collapsed on a phone: the week is one tap away.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub