# 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…

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-10).

- Page, with a preview: https://shadcn.exchange/r/reui/solution-inventory-10
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/solution-inventory-10-light-8afb586e6d675ad4.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-10

## Dependencies

- npm packages: `cn`
- Registry items: `@reui/frame`, `@reui/timeline`, `button`, `checkbox`, `dialog`, `field`, `input`, `input-group`, `item`, `label`, `scroll-area`, `select`, `separator`, `tabs`

## Notes from the registry

## 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.