Shadcn Map Blocks: Live Fleet Dispatch on a Street Map

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

When to use

Dispatch and fleet pages where the work happens on a real street map: vans, routes, stops and their exceptions
Location operations that need analytics beside the map and actions on what the map shows

When not to use

Stock, warehouse and shipping fulfillment with no live map of vehicles or routes: use the Inventory blocks
Appointments booked by time slot and staff member: use the Bookings blocks
A 3D model of a site, a machine or a venue rather than a street map: use the Digital Twin blocks

Agent notes

Blocks render with maplibre-gl 6 and OpenFreeMap tiles: no key, commercial use allowed, attribution stays visible on the map
The map-prefixed files in each block are a domain-free map kit you can lift whole; pass mapStyles to swap the basemap
Each block keeps the Heron Run world in its own data.ts with NOW as the frozen clock; swap the records, keep the rules

Third-party API docs

Recharts v3: API reference, docs, used by 1 of 1 blocks
TanStack Table v9: API reference, docs, used by 1 of 1 blocks
MapLibre GL JS v6: API reference, docs, llms.txt, used by 1 of 1 blocks
cmdk v1: API reference, docs, used by 1 of 1 blocks
Sonner v2: API reference, docs, used by 1 of 1 blocks

Markdownhttps://reui.io/blocks/solutions/map.md

MCPsearch({ query: "map", type: "block", category: "map" })

Full index for agents:llms.txtReUI MCP setup

Map Blocks for React: Live Fleet Dispatch on a Street Map

The dispatch map runs a demo same-day delivery company, Heron Run, out of its SODO depot in Seattle on a Thursday afternoon: 24 vehicles from minivans to box trucks, 13 drivers and 9 routes with 82 stops in neighborhoods from Ballard to West Seattle. A stop's ETA is the road miles left at 17 mph plus 5 minutes per door, and the stop is at risk once that ETA passes the end of its 2 hour window. An electric van is range short when its range is under 1.1 times the miles it has left, depot included, and a cold box above 41°F raises an exception. The simulation drives each van at its own pace at 1x to 120x real time and closes the stops it reaches, and 5 minutes in a brake warning stops V-09 for 45 minutes.

The map is MapLibre GL on OpenFreeMap tiles, with no API key, a basemap that follows light and dark mode and its attribution kept visible. A floating ReUI Frame panel holds the fleet overview or the selected van, a Command palette on ⌘K or Ctrl+K finds vehicles, drivers, stops, merchants and areas, and the list view is a ReUI Data Grid with Filters and a Cascader columns menu. A stop is failed, reassigned or rescheduled in shadcn Sheet and Dialog overlays, a ReUI Timeline lists the exceptions, and every write confirms in a Sonner toast with an Undo, except a sent message.

All Map Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

Dispatch Map Fleet Dispatch Map with Live Routes, Van Detail Panel, Stop Reassignment and Van List

What the Map Blocks Cover

Live fleet map Each van glides along its route with artwork for its body type and a dot in the tone of its worst open exception. Route lines, stop dots and van labels toggle from the layers menu, the camera can follow a van, and a right click opens its actions.
Fleet panel A donut splits the day into delivered, failed, at risk and to go stops beside the on time rate and the time the last van gets back. Open exceptions group by kind, deliveries per hour run from 1 PM to 5 PM, and every van counts as on or off the road.
Van and stop detail A selected van shows its range against what the route still needs, its load and, on a reefer, its cargo temperature, then every stop in road order with its window and ETA. The next stop closes as Delivered or Failed with a reason, and an open stop moves to a later window or another van.
Reassign and reschedule Reassign ranks the vans by the miles each would add at its cheapest point in the route, on time first, and names why the rest cannot take the stop: breakdown, maintenance, charging, no driver, no cold box, full or low range. Reschedule offers each later 2 hour window that has not closed and puts the stop last on its route.
New deliveries New Delivery waits for a click on the map, then takes the recipient, merchant, address and note, a 2 hour window, 1 to 20 parcels and cold chain, and offers the 3 vans that fit best.
Exceptions Breakdowns, late stops, low range, cargo temperature and failed attempts list newest first on a timeline, each with its fix (Reassign, Reschedule or Message Driver) beside View and Acknowledge. An acknowledged exception stays listed until its cause clears, and one the clock raises arrives as a toast.
Vehicle twin and remote controls The van sheet steps through the fleet in Overview, Vehicle, Controls, Route and Activity tabs. Overview draws the vehicle in iso or 2D with the parcels on board, and Controls sets the drive mode, a 45 to 75 mph speed governor, the charge limit or refuel alert, the cold setpoint and 3 safety switches.
Van list A paginated grid of every van, searchable by van, plate, driver or area, with Filters on status, vehicle, driver, powertrain, charge, alerts and at risk. Vans are added, edited and retired from here, and a van with open stops cannot be retired.

Related Shadcn Block Categories

Inventory Stock, warehouse, reorder, movement, count, and supplier visibility pages.
Digital Twin Interactive 3D scenes of physical places on React Three Fiber, a stadium sector picker and a live kart race, each synced with a 2D plan.
Bookings Appointment, reservation and service-business admin pages for consultants, clinics, salons, hotels, and local services.
Dashboard Dashboard components and layouts that combine stats, charts, and tables into a complete overview screen.
Sheet Sheet panels for record details, editing forms, notifications, and side drawers that keep users in context.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

Shadcn Application Blocks (305) Browse 305 Shadcn Application blocks across 23 categories.
Shadcn Data Grid Blocks (53) Browse 53 Shadcn Data Grid blocks across 9 categories.
Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
Shadcn Solutions Blocks (83) Browse 83 Shadcn Solutions blocks across 13 categories.
Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.

Frequently Asked Questions

Does the block track real vehicles or optimize routes?

No. The vans move on a simulation over planned route lines, and every dispatcher write lives in local state and ends in a toast. Live GPS, auto-optimized routes, turn by turn navigation, proof of delivery and geocoding a typed address are out of scope: a new delivery is placed by a click on the map, and its address is a label. Every change to a stop or a van, and every message to a driver, reaches your app through callback props, so you can send it to your own dispatch system and the driver's app.

How are ETAs, at risk stops and range worked out?

Each van plans its open stops in order from where it is: the road miles to each stop at an average 17 mph, a wait when it arrives before the window opens, then 5 minutes at the door. A stop is at risk once its ETA passes the end of its 2 hour window, and the on time rate is the share of delivered stops closed inside their window. Range is the battery or fuel level times a full range of 150 miles electric or 360 gas, and an electric van is range short when it falls under 1.1 times the miles to finish its stops and drive back to the depot.

How does Reassign choose the van?

It tries the stop in every gap of each van's route, between the van, its open stops and the depot, keeps the gap that adds the fewest miles, and re-plans the route to get the new ETA. Vans that make the window rank first, then by the miles added, and each card shows the miles, the ETA and the load after. A van broken down, in maintenance, charging, without a driver, without a cold box for a cold stop, full or short of range is listed as not eligible with its reason. A failed stop handed to another van becomes a fresh attempt.

Can I undo a dispatch action?

Yes. Delivering or failing a stop, rescheduling, reassigning, creating a delivery, adding, editing or retiring a van, saving remote controls and acknowledging exceptions each fire one toast with an Undo that restores the records the write touched, while the clock and every other van keep running. Only the latest write can be undone, since a newer one retires the older toast, and the toast stays up for 8 seconds. A sent message has no Undo, and the simulation's own moves are silent.

How do I load my own fleet?

The demo world sits in the block's data file with a frozen clock, so swap the vans, stops, drivers and planned route lines for your feeds and keep the rules. The body type, from minivan to reefer truck, follows each vehicle's parcel capacity and cold box, and the registration, health and tire figures are seeded from the van's id until your telematics feed replaces them. The 17 mph average, 5 minutes per door, the 1.1 range buffer and the 41°F cold limit sit beside the routing code as constants. Legs off a van's planned line run over the other planned lines, so plug in your own router for real streets, and the ranking re-plans every van on each request, so past about 100 vans a route solver fits better.

What does the block install and need?

The shadcn CLI adds MapLibre GL, Recharts for the day donut, TanStack Table for the ReUI Data Grid and Sonner, with ReUI Frame, Badge, Alert, Filters, Cascader, Number Field, Timeline and Icon Tile and the shadcn components behind its sheets, dialogs, menus and command palette. The map needs WebGL2 and shows a Map Unavailable state without it. OpenFreeMap needs no key and allows commercial use while its attribution stays on the map, and a prop swaps the light and dark basemaps for your own.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.