Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Farmers Markets Map Block for React Aria

A strip of seven days with the number of markets open on each, over a drawn street map: choosing a day keeps the open markets' pins and lists their hours and season in months, marking markets that open on two days.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show shoppers which markets are open this week with this farmers markets map for React with React Aria. Gleanmarket, a market directory, draws the invented town of Tarlbrook as an SVG street map with eight markets. A strip of seven days (Monday 12 to Sunday 18 October 2026), built from a Toggle Group, shows how many markets open on each; on a phone it scrolls sideways. Choosing a day keeps the pins of the markets open then, square when a market opens on more than one day, and lists them with their hours and their season in months ("Apr to Dec", "All year"). A market that opens on two days is marked on both with an "Also Saturday" style badge, and the others stay in place, unseen, so the map never reflows. A day with no market shows an empty state, and a market whose season is over is named under the list. Today's hours ("Open until 11:00") come from a fixed time rather than the clock. A polite status line speaks the count once the choice settles. It's built from Toggle Group, Badge, Empty and Guides, with a CSS entrance only. For market directories, community sites and farm-shop networks.

FAQ

How do I fill it with my markets?

Edit MARKETS. Each market has an id, a name, a days array of weekday numbers with Monday as 0, opening and closing times in minutes after midnight, the first and last month of its season and an x and y in the drawing's 480 by 360 units. In your app generate the days from your listing data and keep opensOn, the one function that combines the weekday with the season.

How does the season work?

AS_MONTH is October. A market is open on a day only if that month falls between its first and last month, so Quarry Row Market (June to September) opens on no day this week and is named under the list as out of season. Its pin stays in place, unseen.

Where do today's hours come from?

From AS_OF, a fixed Monday morning in the file. It applies only to the day that is "today"; the other days show the plain opening window. It is never read from the clock.

Can I use it without a mouse?

Yes. The strip is a group of toggle buttons (each named with its day, date and count), every open market is a button in the list that marks it, and the pins are hidden from assistive technology and skipped by the Tab key because the list says the same things in text.

What stays local in the demo, and how do I wire it up?

All of it. Markets, hours and seasons are typed sample data and nothing is saved or sent. In your app load the week's markets when the page opens and make a row open the market's page or add it to a calendar.

How does it look on a phone?

The day strip scrolls sideways with snap points, so each day keeps a comfortable tap target. The map comes next at a fixed height and the list sits under it in a box that scrolls on its own, so the page never jumps when the day changes.

All 100 map blocks