Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Shipping Tracker Dashboard Block for Radix UI

Six open parcels as rows with a radio, and a side cell with the picked parcel's route through five hubs, its tracking events and a Contact carrier dialog when it is held.

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

Follow a parcel from the depot to the door, with this shipment tracker for React with Radix UI. A hairline frame with a plus mark on each corner holds six open parcels as ruled rows with a radio, the order number in mono, the destination, the carrier, a status word (Label created, In transit, Out for delivery, Delivered or Exception) and the day it is due. A side cell follows the picked parcel: its route as vertical Steps through Origin, Sort hub, Regional hub, Out for delivery and Delivered, with a time on each hub reached and the current one marked, then its tracking events newest first. A parcel held at customs says why and offers "Contact carrier", a Dialog with a drafted message and a Shine Button that notes the contact in this page. The status line names the picked parcel. Below the medium breakpoint the route sits under the rows. It's built from Steps, Dialog, Button, Shine Button and Guides. For parcel tracking and logistics teams.

FAQ

How do I load my own parcels?

Edit PARCELS. Each has an order number, a destination, a carrier, an ISO due day, the hub it has reached (0 to 4), an ISO time for every hub reached and, for a held parcel, the reason. The status word, the steps and the events are all worked out from those fields.

How is the status decided?

A parcel with a hold reason is an Exception; otherwise the hub it has reached decides it: the origin is Label created, the sort and regional hubs are In transit, the last-mile hub is Out for delivery and the final hub is Delivered. The current hub is the one marked in the route.

What does Contact carrier do?

It opens a dialog with a drafted message about the held parcel. "Mark as contacted" closes it and notes the contact in this page, and the button then reads "Contact carrier again". No message is sent; in your app send it from a server action to the carrier's API or your inbox.

What stays local, and how do I wire it for real?

The parcels and the contacted state are typed or in component state. To wire it up, load parcels and their scan events from your carrier's tracking API, order the events by time and keep the same shape for the route.

Can I use it with a keyboard?

Yes. The parcels are a native radio group, so the arrow keys move the pick and the side cell follows it without moving focus. The dialog traps focus, closes with Escape and returns focus to its button.

How does it look on a phone?

Each parcel is two lines, with the number and status on the first and the destination, carrier and due day on the second. The route and the events stack under the list at the full width.

All 200 dashboard blocks