Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Mining Operations Map Block for Ark UI

Six mines hauling to one plant along roads whose width is tonnes a week, a Copper, Iron and Lithium toggle that filters them, and an inset card with four quarters of output and the signed change.

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

See what is moving to the plant, with this mining operations map for React with Ark UI. Seamfield, a mining company's operations view, draws an invented hill country with contours and a river, a processing plant in the middle and a haul road from every mine to it, each as wide as the tonnes it carries a week. A Toggle Group keeps the mines that produce Copper, Iron or Lithium and re-sizes the roads. Choosing a mine, on the map or in the table under it, opens a card drawn inside the stage (docked under the map on phones) with four quarters of its output as bars and the change from the third quarter to the fourth as a signed number with an arrow. The foot totals the tonnes moving, the number of mines and the largest one. The table is the keyboard route and the numbered squares are a pointer shortcut. It's built from Toggle Group and Guides, with a CSS entrance only. For mining and quarrying operations, commodity dashboards and plant planners.

FAQ

How is a road's width set?

From the mine's tonnes a week in the last quarter, as a share of the largest mine of the chosen resource: a hairline plus up to THICKEST units. The widths are therefore relative within a resource, which the caption says, and the foot gives the real totals.

What does the change mean?

The percentage difference between the fourth quarter and the third for the chosen resource and mine, signed and with an arrow that never mirrors in a right-to-left page. The bars show all four quarters, scaled to the highest of them.

Can I use it without a mouse?

Yes. The resource is a toggle group with arrow keys and each mine in the table is a button with aria-pressed. The map is hidden from assistive technology because the table and the card say the same things in words, and a polite message speaks the choice.

How do I use my own mines?

Edit MINE_LINES: each line has an id, a name, a position in the 480 by 360 units and twelve numbers, the four quarters of copper, iron and lithium in tonnes a week. A zero means the mine does not produce it, and it leaves the map and the table when that resource is chosen.

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

All of it. The mines, tonnes and quarters are invented and nothing is measured. In your app read tonnes per week from your production system and keep weeklyOf, changeOf and totalOf as the derived figures.

How does it look on a phone?

The map comes first at a fixed height, the mine card docks under it as a band and the foot's three cells share hairlines. The table scrolls inside a box of fixed height, so changing the resource never changes the length of the page.

All 100 map blocks