Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Shipping Lanes Map Block for React Aria

Eight freight lanes across an invented strait whose width is the cargo volume, a cargo toggle that swaps containers, bulk and liquid, and a port card that sums what comes in and goes out with its share of all traffic.

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

Show where the freight moves, with this shipping lanes map for React with React Aria. Cargomoor, a freight analytics tool, draws an invented strait with a coast on each side, six numbered ports and eight lanes between them, each as wide as the cargo it carries. A Toggle Group swaps the cargo between containers, bulk and liquid, and the lanes re-widen from three typed sets in thousand tonnes a week. Choosing a port, on the map or in the list at the side, keeps its lanes dark and fades the rest, and its card sums the cargo coming in and going out, lists each lane with its volume and shows the port's share of all the traffic as a Progress bar. The list is the keyboard route and the pins are a shortcut for the pointer. It's built from Toggle Group, Progress and Guides, with a CSS entrance only. For freight dashboards, port authorities and logistics tools.

FAQ

How is a lane's width set?

From the volume in thousand tonnes a week for the chosen cargo: a hairline plus UNITS_PER_KT per thousand tonnes, in the drawing's units, so a lane of 140 is about nine times wider than one of 20. The width eases when the cargo changes, and the caption says what the width means because width alone is not a legend.

What does the share of all traffic mean?

A port's inbound plus outbound volume over twice the total of all lanes, because every lane counts at both of its ends. The shares of the six ports therefore add up to about 100, and the bar shows the chosen port's share of the chosen cargo.

Can I use it without a mouse?

Yes. The cargo is a toggle group with arrow keys and each port in the list is a button with aria-pressed. The pins are a shortcut for the pointer and are hidden from assistive technology; the list and the card say the same things in words, and a polite message speaks the choice.

How do I use my own ports and lanes?

Edit PORTS (an id, a number, a name and a position in the 480 by 360 units), CARGOES and LANE_LINES, where each line is a lane's id, its two ports, three volumes and the height of its bow. The coasts are NORTH and SOUTH outlines, and all the sums are computed from the lanes.

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

All of it. The strait, the ports and the volumes are invented and nothing is read from a manifest. In your app aggregate weekly volumes per lane and cargo from your tracking data and keep inboundOf, outboundOf and shareOf as the display logic.

How does it look on a phone?

The map comes first at a fixed height, then the port list and the card stack under it. The card keeps its height whichever port is chosen, so switching cargo or port never moves the page.

All 100 map blocks