Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Warehouse Network Map Block for Ark UI

Five warehouse hubs on a drawn plan, each inside a ring that fills to its utilisation; choose a from, a to and a number of pallets to preview a move, and apply it when no hub overflows.

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

Move stock where there is room before a hub overflows, with this warehouse network map for React with Ark UI. Palletbrook, a logistics planner, draws five hubs on a plan with a hairline grid: each hub is a tile inside a ring that fills to its utilisation, and seven lanes join them, drawn thicker for more pallets a week. Two selects (the second lists only the hubs on a lane from the first) and a pallets field preview a move: both rings and percentages update at once, the lane carries the number with an arrow, and a hub pushed past its capacity says "Over capacity by 40 pallets" in words, gets a dashed outer ring and turns the lanes into it dashed. The row of five cells under the plan gives each hub's stock, a bar and the change from where it stood. The one primary in the header applies a move that fits; the preview then carries on from the new stock. It's built from Native Select, Number Input, Progress, Shine Button and Guides, with a CSS entrance only. For warehouse, logistics and retail operations.

FAQ

When is a move refused?

When the number is not a whole number above zero, when the source holds fewer pallets than asked, or when the destination would end up over its capacity. The line under the plan says which, the Apply button keeps its place but only answers with the reason, and nothing changes until the move fits.

How do I use my own hubs and lanes?

Edit HUBS (a name, a two-letter mark, a capacity, the stock at the start and a position in the drawing's 480 by 360 units), LANES (two hub ids and the pallets a week) and START, the current stock by id. The rings, bars, selects and lane widths are derived from them.

Can I use it without a mouse?

Yes. The two selects, the number field and Apply are ordinary controls; type a number and press Tab or Enter to settle it. The drawing is decoration for assistive technology and every figure in it is repeated in the cells below and in a polite message that speaks the preview once you stop typing.

What do the lane widths mean?

They are the pallets a week the lane already carries, in four steps from thin to thick, and are only a guide to which routes are busy. The move you preview is drawn on top as a chip with the number and an arrow towards the destination.

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

All of it. Applying a move changes numbers in the page and orders no transfer. In your app send the move to your warehouse system from the apply handler, wait for it to be accepted, and then update the stock from its answer.

How does it look on a phone?

The three fields stack, the plan follows at a fixed height, and the five hub cells wrap in two columns with the last one spanning both. The warning text has a reserved line, so nothing jumps when a hub overflows.

All 100 map blocks