Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Geographic Breakdown Dashboard Block for React Aria

Five regions ranked as bars by revenue, users or revenue per user with the places each moved against last quarter; press a region to rank its countries, and a breadcrumb goes back to the world.

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

Drill from regions into countries with this geographic dashboard for React with React Aria. A SegmentGroup in the header picks the metric: Revenue, Users or Revenue per user. A hairline frame with a plus mark on each corner then ranks Atlasmoor's five regions as bars, each with the places it moved against last quarter written beside an arrow. Pressing a region replaces the list with its four countries ranked the same way, and a breadcrumb above the bars goes back to the world. Changing the metric re-ranks whatever level you're on. The list keeps its height at both levels, and a polite line reads what is shown. It's built from SegmentGroup, Button and Guides. For revenue and growth analytics.

FAQ

How do I fill it with my own regions?

Edit REGIONS: each has an id, a name and countries with revenue (in thousands of dollars), users (in thousands) and the same two figures for last quarter, prevRevenue and prevUsers. A region's figures are the sum of its countries, and revenue per user, the ranks and the moves are worked out from them. QUARTER and PREVIOUS are the labels.

How are the moves worked out?

Each level is ranked twice, once with this quarter's figures and once with last quarter's, for the metric you picked. The move is the difference between the two ranks, shown as an arrow and "up 2 places", "down 1 place" or "no change". Because the metric changes the ranking, the moves change with it.

How do I use it from the keyboard?

The metric segments use the arrow keys. Each region is a button: press it with Enter or Space and focus moves to the breadcrumb's current step; the World button returns and puts focus back on the region you came from. The breadcrumb is a labelled navigation, and the current step is marked.

What stays local, and how do I wire it for real?

Everything: the figures are typed and the drill-down is just state. Feed REGIONS from your revenue and user tables grouped by country, and keep the totals computed on your side so the regions always equal their countries.

How does it look on a phone?

Each row becomes two lines: the name and the value first, then the bar and the move. The metric segments take the full width under the header sentence.

All 200 dashboard blocks