Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Demographic Overlay Map Block for React Aria

Six districts of an invented borough, each with a three-bar age glyph; a toggle picks the band (under 18, working age, 65 and over) that fills the map in five steps and outlines its bar, with the highest and lowest district named.

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

Read a district's age mix at a glance, with this demographic overlay map for React with React Aria. Cohortlane, a planning analytics tool, draws six districts of the invented borough of Harnscombe, each with a small three-bar glyph for under 18, working age and 65 and over. A Toggle Group picks the band: the districts are filled in five equal steps across that band's range, the chosen bar is solid and outlined in every glyph, and the legend lists the five ranges in words. A card at the side spells out the chosen district's three shares, rounded by largest remainder so they add to 100, and the districts are listed as buttons under it. A dock under the map names the highest and the lowest district for the band. Pressing a district or a row marks it; the list is the way in for the keyboard and the map is a pointer shortcut. On a phone the map comes first, then the card and the list, then the toggle. It's built from Toggle Group and Guides, with a CSS entrance only. For planning offices, school boards and service-demand analysis.

FAQ

Why do the three shares always add to 100?

sharesOf takes each band's exact percentage, keeps the whole part and gives the missing points to the bands with the largest remainders. Rounding each share on its own can total 99 or 101; this cannot.

How are the five shades chosen?

The five steps are equal slices of the range between the lowest and the highest district for the chosen band, so the shading always uses the whole ramp. The legend reads those edges from the data and rounds them to whole percent, so it follows the band.

How do I use my own districts?

Edit LINES: a lattice cell number, a name and three head counts. The shares, the glyph heights and the highest and lowest are derived from them. In your app swap the lattice for real boundary geometry, keep sharesOf and levelOf, and feed the counts from your census or registry export.

Can I use it without a mouse?

Yes. The toggle group is one tab stop with arrow keys, and each district is a button in the list with its pressed state. The districts and glyphs on the map are skipped by the Tab key and hidden from assistive technology because the card and the list say the same things in text. A polite message names the highest and lowest district once the band settles.

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

All of it. The borough and its counts are invented sample data and nothing is exported or sent. In your app load the counts for the chosen year and connect the district buttons to your planning view.

How does it look on a phone?

The map keeps its full width at a fixed height, with the glyphs the same size at every width, and the card, the list and the dock stack under it. Switching the band does not change the height: the card and the dock reserve their lines.

All 100 map blocks