# Track Shipping

> Track Shipping sheet: a right-anchored single-column Sheet (sheet-6 + solution-inventory-7 anatomy) showing a shipment header (id + Shipped badge + placed-date / Order ID link meta + Cancel Order / Notify Customer actions), an origin-to-destination route with a carrier chip, a 4-step horizontal progress stepper (Picking / Packed / Shipping / Delivered with done / active / pending states), a Shipping Data summary (Total Time, Dep. Time, Exp. Arrival, Tracking No.), and a vertical Shipping Log timeline. Full-width Close button in the footer.

A paid shadcn/ui block sold by the [@reui](https://reui.io/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/solution-inventory-9).

- Page, with a preview: https://shadcn.exchange/r/reui/solution-inventory-9
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/solution-inventory-9-light-0dadafe674ade95f.png
- Listed: 2026-10-13

## Buy and install

@reui sells this block, and its code is not on shadcn.exchange. Buy it from the registry, which installs it for those who have: https://shadcn.exchange/out/reui/solution-inventory-9

## Dependencies

- npm packages: `cn`
- Registry items: `@reui/badge`, `@reui/frame`, `@reui/timeline`, `button`, `scroll-area`, `sheet`

## Notes from the registry

## Purpose
Live-tracking detail surface opened from an orders or shipments table. Surfaces the shipment id + status, route, current step, summary data, and the chronological event log on a single column so the operator can quickly answer "where is this package?" without leaving the parent screen.

## Best Fit
- shipment tracker drawer opened from a shipping/orders DataGrid row
- customer-success workspace where an operator needs to read the status + log without losing the parent screen
- fulfilment workflow where Cancel Order and Notify Customer are the two next actions

## Main Pieces
- **Sheet shell** (adapted from `application/sheet/sheet-6` and `solutions/inventory/solution-inventory-7`): right-anchored Sheet with inset rounded corners, no built-in close button, `SheetHeader` carrying the title row + shipment id + Shipped badge + placed-date / Order ID meta + Cancel Order (ghost) / Notify Customer (outline) action cluster, a single-column `ScrollArea` body, and a `SheetFooter` with a full-width `Close` outline button.
- **RouteAndStepper** (ReUI `Frame` + `FramePanel`, `dense spacing="sm"`, `shadow-none!`): two-stop origin → destination list with vertical dot-and-line connector, plus a carrier chip on the right (small colored square holding the carrier initials next to the carrier name). Below the route, a 4-step horizontal `Stepper` - segmented progress bars on top, then a row of `done` (filled emerald check) / `active` (outline emerald check) / `pending` (gray outline) state icons + labels.
- **ShippingDataSection** (Frame): 4-column stat strip - Total Time, Dep. Time, Exp. Arrival, and Tracking No. (mono).
- **ShippingLogSection** (Frame): vertical log timeline - each entry has a left-side dot connected by a thin vertical line, the event title + timestamp on the same line, a description below, and an optional location row with a small `MapPin` icon.

## Reused Blocks
- `application/sheet/sheet-6` - sheet anatomy: trigger + custom-width `SheetContent` + sticky header / scrollable body / sticky footer
- `solutions/inventory/solution-inventory-7` - `Frame dense spacing="sm"` + `FramePanel shadow-none!` convention, header SKU/created/updated meta pattern (adapted for Placed / Order ID), the action-cluster pattern with a `Button` rendered as an anchor for the Cancel Order link

## Layout Grid
- Sheet width: `w-[min(48rem,calc(100vw-2rem))]` - never exceeds 768px (narrower than solution-inventory-7's 60rem because this is single-column content), never less than viewport - 2rem padding
- Body: single `<ScrollArea>` wrapping a vertical flex of three Frames + a route+stepper composite. Same shell works mobile and desktop - no two-panel split needed since the design is intrinsically one column.
- Inner grids: Shipping Data uses `grid-cols-2 sm:grid-cols-4` so the 4 stats reflow to 2-up on narrow widths. The Stepper uses `grid-cols-4` and the route stops always stack vertically (typical from → to pattern).

## LLM Guidance
Keep the three-piece body composition (`RouteAndStepper` / `ShippingDataSection` / `ShippingLogSection`). The Stepper state taxonomy (`done` / `active` / `pending`) drives both the bar fill (emerald vs muted) and the icon (filled check / outline check / empty circle); keep the two in sync when extending states. The Shipping Log timeline uses a single `<ul>` with absolutely-positioned dots and connector lines drawn via `before`/sibling pseudo-elements - when adding entries, the last one drops the connector line via the `isLast` prop. The carrier chip is a generic colored-tile + initials + name pattern; swap the initial + tile bg when adapting to FedEx / USPS / DHL etc. Cancel Order is rendered as a `Button` rendered as an anchor with `variant="ghost"` so the action group reads as a row of buttons (no inline-link styling) - consistent with solution-inventory-7's HeaderActions. The bottom action is intentionally a single full-width Close - Notify Customer and Cancel Order live in the header per the design.