Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Site Selection Compare Map Block for Radix UI

Five candidate shop sites on a drawn map, two selects to choose which to compare, a footfall slider that dims sites under the minimum and a table that marks the better site on each of five measures with a check and a word.

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

Choose between two shop sites on the numbers, with this site selection compare map for React with Radix UI. Siteward, a retail site tool, draws five candidate sites as lettered squares on an SVG street map of the invented town of Tamsbury. Two native Selects choose the sites to compare (choosing the site the other select holds swaps them), and a Table sets five measures against each other: footfall a day, rent a month, parking spaces, rivals within 500 metres and demographic fit. The better site on each row gets a check and the word Higher or Lower, a tie says Same, and a line under the table says who leads on how many. A Minimum footfall Slider dims every site under it on the map and flags it in the table's header, so you can see what the filter would cut before you drop a site. Rents are integer cents; the figures and the drawing are sample data and nothing is saved. On a phone the map comes after the three controls and the table keeps its three columns. For retail, restaurant and clinic site tools.

FAQ

How does it decide which site is better?

Each measure has a direction in the CRITERIA list: more is better for footfall, parking and fit; less is better for rent and rivals. standing compares the two sites on a row and returns win, lose or same. The winner gets the check and the word, the other row keeps an invisible placeholder so the table never changes height, and the line under the table counts the wins.

Why is there no overall score?

Because the weights are a judgement the person makes: a shop that lives on passing trade weights footfall, a delivery kitchen weights rent. Counting wins is honest; a single score would hide a weighting nobody chose. If you want one, add a weights control and compute the score in one helper.

What does the footfall slider do?

It sets a floor. A site under it turns dashed and grey on the map and says "Under your minimum" in the table's header, but it is not removed: you can still compare it. The slider announces "1,250 people a day" and steps by 250.

Can I use it without a mouse?

Yes. Both selects are labelled, the slider takes the arrow keys, and the table has column headings and a name. A polite message speaks the verdict and how many sites are under the minimum after the controls settle. The squares on the map are hidden from assistive technology because the table says the same things in text.

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

All of it. The five sites and their figures are typed sample data and nothing is saved or sent. In your app load the candidate sites from your own data, keep the rent in integer cents, and show where each figure comes from.

How does it look on a phone?

The two selects and the slider stack above the map, the map keeps its full width at a fixed height, and the table keeps the measure and both sites in three columns, with the check and word under each value.

All 100 map blocks