shadcn.io is not affiliated with official shadcn/ui
Map Location Footer Block for Radix UI
A visit-us footer for a coworking space: the address, visiting days and a transit, car or bike choice that swaps the directions and the route on a greyscale street map drawn in a framed figure.
Installation
Overview
A visit-us footer for React with Radix UI, split behind a hairline that runs from the page's top rule to the end of the page. The start half has the brand, one row of links in the nav labelled Footer, the postal address in an address, the days it is open to visitors, and a three-way choice (transit, car, bike) that swaps one sentence of directions. The end half is a framed figure with + marks on its corners: a street map drawn in greyscale, with streets, a river, a park and one pin, that traces the chosen route as a dashed line. It is a drawing for illustration, never a real map. A legal band runs under both halves. It's built from ToggleGroup, Guides and your theme's tokens.
FAQ
Is this a real map?
No. It's an inline SVG of an invented street grid, drawn from the theme's own tokens so it follows light and dark, and captioned as an illustration. There is no tile service, no key and no network request. To use a real map, replace the figure's contents with your provider's embed, and keep the toggle if you like.
What does the choice do?
Choosing transit, car or bike swaps the directions sentence and redraws the dashed route on the map. The three sentences share one grid cell, so the footer does not change height. A screen-reader-only status line speaks the new directions when the choice changes, and stays silent on load. Edit WAYS to change the sentences and the routes: each route is an SVG path in the map's 480 by 360 box.
Pressing the chosen item again clears the library's value, and the block ignores that, so one way is always active.
How do screen readers meet the map?
The drawing is hidden from them: everything it shows is in the text beside it. The address is an address, the visiting hours use time elements, and the figure has a caption. The map never mirrors in a right-to-left layout, since streets do not flip.