971 / 1002

Local Hours and Map

Opening hours with today highlighted and an Open now badge, next to an illustrated street map with a dropping pin and a Get directions button.

Visit the shop

Come say hello on Larch Street.

Plants, pots and repotting help, five minutes from the Clinton Street stop. Free parking behind the building.

Open now · until 8:30

214 Larch Street
Portland, OR 97214

214 Larch Street6 min walk from Clinton St

terminal

npx shadcn@latest add https://hyperblur.dev/r/local-hours-map.json

Works in any React project set up with the shadcn CLI. The file lands in components/hyperblur/local-hours-map.tsx.

example.tsx

import { LocalHoursMap } from "@/components/hyperblur/local-hours-map"

<LocalHoursMap name="Fern & Field" todayIndex={5} openNow />

Prop	Type	Default	Description
eyebrow	string	"Visit the shop"	Small line above the heading.
title	string	"Come say hello on Larch Street."	Heading.
subtitle	string	"Plants, pots and repotting help, ..."	Paragraph under the heading.
name	string	"Fern & Field"	Business name on the hours card.
address	string[]	["214 Larch Street", "Portland, OR 97214"]	Address lines.
phone	string	"(503) 555-0187"	Phone link. Empty hides it.
hours	{ day: string; hours: string; note?: string }[]	Monday to Sunday	Rows of the hours table. Write Closed as the hours to show it in red.
todayIndex	number	3	Row highlighted as today. Set it from the server or a client effect; the block never reads the clock.
openNow	boolean	true	Shows the green Open now badge, or Closed now when false.
statusText	string		Overrides the badge text. By default it reads the closing time from today's row.
directions	{ label: string; href: string }	{ label: "Get directions", href: "https://maps.google.com/?q=..." }	Button on the map. Opens in a new tab.
streets	string[]	["Larch St", "Clinton St", "Hawthorne Blvd"]	Street names printed on the map.
accent	string	"#2f5d3a"	Accent color used for highlights, selected states and buttons.
className	string		Extra classes on the section root.
style	React.CSSProperties		Inline styles on the section root.