# Order Details > Order details sheet: a right-anchored fulfillment review surface that reuses the solution-inventory-7 sheet shell. Header carries an Order Details title row, the order id + Shipped badge, a Created / Customer meta line, and a vertically-centered Delete / Order Tracking / View Shipping Label action cluster. The scrollable two-column body pairs an Order Data Frame (Items, Total Price, Shipping Priority, Delivery Method), a Products Frame with Item-based rows (image + name + SKU/color, inline weight input on the right), and a title-less Shipping Frame combining a vertical route Timeline, a UPS G… 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-11). - Page, with a preview: https://shadcn.exchange/r/reui/solution-inventory-11 - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/solution-inventory-11-light-4d8941021918189e.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-11 ## Dependencies - npm packages: `cn` - Registry items: `@reui/badge`, `@reui/frame`, `@reui/timeline`, `button`, `input-group`, `item`, `label`, `scroll-area`, `separator`, `sheet` ## Notes from the registry ## Purpose A fulfillment review surface the operator opens from any order list (e.g. an order DataGrid row) to verify items, weight, shipping route, status, and totals before printing the shipping label. The sheet shares the solution-inventory-7 inset-anchored shell so it slots in next to solution-inventory-7 / solution-inventory-8 / solution-inventory-9 as a consistent right-anchored operator sheet family. ## Best Fit - detail review triggered from an orders/fulfillment DataGrid row - pre-ship verification screen that combines order metadata, item weights, route, and totals in one surface - ops handoff sheet where the same Delete / Order Tracking / View Shipping Label cluster lives in both header and footer ## Main Pieces - **Sheet shell** (adapted from `solutions/inventory/solution-inventory-7`): right-anchored `Sheet` with inset rounded corners, no built-in close button, custom `SheetHeader` carrying the title row + order id + meta line + action cluster, `ScrollArea` body, custom `SheetFooter` with terms link + action cluster. The header sub-row uses `lg:items-center` so the action cluster vertically centers with the title+meta block. - **Order Data** (ReUI `Frame` dense spacing="sm"): 4-up grid of Items, Total Price, Shipping Priority, Delivery Method. - **Products** (ReUI `Frame` dense spacing="sm"): shadcn `Item` rows (`` + `` + `` + `` + ``) for each product. The image is a 40px (`size-10`) bordered tile, and the right slot carries a `Label` + `InputGroup` weight input suffixed with `kg`. Pattern matches `solutions/inventory/solution-inventory-10` exactly. - **Shipping** (ReUI `Frame` dense spacing="sm", title-less): single `FramePanel` containing a vertical `Timeline` route with two address stops, a `UpsLogo` carrier chip on the right, a `Separator`, and a four-step horizontal `Stepper` (Picking / Packed / Shipping / Delivered). - **Summary** (ReUI `Frame` dense spacing="sm"): destination header + address, a separator, a `Price Details` block (Subtotal / Shipping / Tax / Total), and a final separated total row. ## Reused Blocks - `solutions/inventory/solution-inventory-7` - sheet anatomy: trigger button, custom-width `SheetContent`, sticky header/footer, two-column body, mobile-stacked / `lg+` side-by-side split with independent `ScrollArea`s - `solutions/inventory/solution-inventory-10` - product `Item` row pattern (Item + ItemMedia/ItemContent/ItemTitle/ItemDescription with `px-0 py-0` Item, `size-10` bordered ItemMedia image, right-slot weight `InputGroup`), `bg-primary` Timeline indicator/separator colors, and combined route + stepper inside a single `FramePanel` separated by `Separator` - `solutions/inventory/solution-inventory-9` - `Stepper` / `StepIcon` indicator pattern (emerald dot for done, ringed check for active, hollow circle for pending) and original `CarrierChip` pattern (adapted for UPS Global) ## Layout Grid - Sheet width: `w-[min(64rem,calc(100vw-2rem))]` - never exceeds 1024px, never less than viewport - 2rem padding - Inner body: stacked `ScrollArea` on mobile; `lg+` splits into a flex-1 left column and a `w-[320px]` right rail with a vertical `Separator` - Order Data: `grid-cols-2 sm:grid-cols-4` so KPIs reflow on narrower body widths - Product rows: shadcn `Item` with `items-center gap-3 px-0 py-0` so image, content, and weight input read as one compact row ## LLM Guidance Keep the three-piece left column (`OrderDataSection` / `ProductsSection` / `ShippingSection`) and the single right-column `SummarySection`. To add another KPI to Order Data, extend the `stats` array - the grid will reflow. To add another product line, append to `ORDER.items` (rendered via `ProductItemRow`). The `HeaderActions` cluster is intentionally rendered twice (header + footer) - edit the single component to keep both in sync. The sheet defaults to `open: true` so the preview reads at full state; in production wire `open`/`onOpenChange` to the parent grid's row trigger. The `UpsLogo` SVG is inline; replace it with a different carrier mark by swapping the SVG and the `name` passed to `CarrierChip`.