Create Shipping Label

Create shipping label dialog: a wide centered dialog with a sticky header carrying the title + close action, a two-column scrollable body, and a sticky footer with terms link plus Cancel / Buy Shipping Label actions. Left column stacks a pickup-to-destination route + order meta card, a Products card with per-item Weight inputs (kg), and a Packaging card with Custom Package / Carrier Package line tabs containing package name, type select, total weight, length/width/height + unit dropdown, and a save-for-future checkbox. Right column carries a Summary card (Shipping to + address + price details + total) followed by a Shipping Date input with calendar affordance and a Send Shipping Info to Customer checkbox.

@reui

Paid block

@reui sells this block. Visit the registry directly to buy and install it.

View registry

RegistryView registry

Docs

Purpose

A buyer/operator dialog for assembling a shipping label from an order. Operators confirm pickup and destination, edit per-item weight, pick or describe packaging, then buy a label without leaving the order page.

Best Fit

order list / order detail page that needs to send a shipment for selected items
fulfilment center workflow where carrier vs. custom packaging is a deliberate switch
post-checkout admin tool that bundles order summary, shipping price details, and label purchase in one surface

Main Pieces

Dialog shell: centered Dialog with a custom sticky header (title + accessible close button), scrolling two-column body, and a sticky footer carrying the Shipping Terms link + Cancel / Buy Shipping Label actions.
Route + order card (ReUI Frame): pickup → destination addresses with a vertical dot/line connector reused from solution-inventory-9, separator, then a 4-column meta row (Order ID, Placed, Total Price, Shipping Priority).
Products section (ReUI Frame + shadcn Item): product rows pair an ItemMedia variant="image" shell (anchored image), product name (anchored), SKU/Color metadata, and a per-row InputGroup Weight field with a kg suffix.
Packaging section (ReUI Frame + shadcn Tabs line variant): line-style TabsList lives inside the FrameHeader. Custom Package panel uses Field + Input + Select + InputGroup for Package Name, Package Type, Total Weight (kg), Length / Width / Height + Unit (sm / in), and a Save-for-future checkbox. Carrier Package panel offers a short empty/secondary state with a Browse Carrier Boxes action.
Summary card (ReUI Frame): shipping destination + address, separator, price details <dl>, separator, and bold Total row.
Shipping date + notify: InputGroup with a CalendarIcon end addon followed by a checkbox that links the word Shipping Info to a destination anchor.

Reused Blocks

application/dialog/dialog-9 - sticky-header + scrolling-body dialog pattern with a custom DialogClose and footer action cluster
solutions/inventory/solution-inventory-7 - Frame / FrameHeader / FramePanel rhythm for stacked operational cards and the ECOMMERCE_LINK_CLASS_NAME convention
solutions/inventory/solution-inventory-9 - pickup → destination dot+line route connector

Layout Grid

Dialog width: w-[min(64rem,calc(100vw-1.5rem))] - never exceeds 1024px, never less than viewport - 1.5rem padding
Body grid: grid-cols-1 lg:grid-cols-[minmax(0,1fr)_18rem] so the right summary rail collapses below the main column on narrower widths
Dimensions row: grid-cols-2 sm:grid-cols-[1fr_1fr_1fr_5rem] keeps Length / Width / Height even-width and pins the Unit select to a compact column

LLM Guidance

Keep the three left-column blocks (Route+Order / Products / Packaging) and the two right-column blocks (Summary / Shipping Date + notify). To add a product line, push another ShipmentItem onto SHIPMENT_ITEMS - the Products section maps over the array and itemWeights state seeds from weightKg. To support imperial dimensions, the Select next to Height owns the unit and is wired to DIMENSION_UNITS. The packaging Custom / Carrier toggle is a controlled Tabs value held in component state; the Carrier panel is an intentionally light empty state so teams can swap in a carrier picker without redesigning the dialog. The dialog defaults to open: true so previews read at full state; in production wire open/onOpenChange to the parent screen's trigger.