Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Last Mile Delivery Map Block for React Aria

A courier's twelve numbered stops along a drawn street route; choose your parcel, step the courier to the next stop and read how many stops away it is, the minutes, and the delivery window.

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 how close a parcel is in stops rather than in guesses, with this last mile delivery map for React with React Aria. Parcelfern, a courier app, draws a street map of an invented town with a depot and a courier's route of twelve numbered stops that follows the streets, a truck for the courier and a square for your stop. A select picks which of three parcels is yours; an outline "Next stop (demo)" button moves the courier to the next stop, which fills the stops behind it, turns the route behind it solid and leaves the rest dashed. Three figures say how many stops away the parcel is, the minutes until the courier arrives and the delivery window, and a progress bar fills as the courier nears your stop. The times come from the legs of the route at a typed pace plus three minutes at every door, from a fixed 09:00 departure. The stop list under the map is the text route to the same facts, and the numbered stops on the map are buttons that mark the matching row. It's built from Native Select, Button, Progress and Guides, with a CSS entrance only. For couriers, retailers and order-tracking pages.

FAQ

How are the minutes and the window worked out?

Each leg runs along the streets, so its length is the horizontal plus the vertical distance in drawing units; over UNITS_PER_KM and the typed PACE that is its drive time, and DWELL minutes are added at every stop. The courier's clock starts at the fixed DEPART. Minutes away are your stop's arrival time minus the time the courier leaves its current stop, and the window runs half an hour from your arrival time rounded down to five minutes.

How do I use my own stops and parcels?

Edit STOPS (a number, name and a position on a street crossing in the drawing's 480 by 360 units) and PARCELS (a label and the number of the stop it goes to), and the streets in STREETS_X and STREETS_Y. Everything else, including the path, is derived.

Can I use it without a mouse?

Yes. The select and the Next stop button are ordinary controls, and every stop is also a button in the list under the map; the numbered stops on the map are a pointer shortcut. The result is spoken by a polite message after each step.

Is the courier live?

No. The button moves the courier through a typed schedule so you can see the counts change, and the times never depend on the clock. In your app feed the courier's real stop number into at and keep the arithmetic for the estimate.

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

All of it. Nothing is requested, no location is read and no message is sent. In your app read the courier's progress and the stop sequence from your routing service and replace the typed list; keep the select for people with several parcels.

How does it look on a phone?

The select and the button stack, the map follows at a fixed height, the three figures sit in two rows and the stop list is a held scroll region, so nothing moves when the courier does.

All 100 map blocks