# Stock Detail

> Per-product stock detail sheet: a wide right-anchored Sheet (inset, sheet-6 anatomy) with a Current Stock + Reorder Now row, an Inventory Rules Frame (threshold / safe / reorder / lead-time inputs + status / delta / velocity / next-reorder / updated-by stats + Auto Reorder switch in the header), a Shipping Frame (Custom / Carrier tabs + package name, type, weight, dimensions + save-package checkbox), and a right-side product summary (image, name, description, SKU / category / rating / price). Footer: Print Label · Cancel · Save.

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

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

## Dependencies

- npm packages: `cn`
- Registry items: `@reui/badge`, `@reui/frame`, `@reui/rating`, `button`, `checkbox`, `field`, `input`, `input-group`, `label`, `scroll-area`, `select`, `separator`, `sheet`, `switch`, `tabs`

## Notes from the registry

## Purpose
A focused per-SKU stock editor opened from any product list. Pairs the inventory reorder rules and shipping configuration on the left with a product summary on the right so the operator can review what they are editing without losing context.

## Best Fit
- per-product stock & reorder-rules editor opened from an inventory DataGrid
- shipping configuration sheet for a fulfilment workflow where label print + save are the primary actions
- merch-ops drawer that combines inventory thresholds, shipping package config, and a product reference card on one surface

## 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, `SheetHeader` carrying the title row + product name + SKU/created/updated meta, `ScrollArea` body, and a `SheetFooter` with `Print Label` on the left and `Cancel` / `Save` on the right.
- **Current Stock** (`Field` + `Input` + `Button`): editable stock value with a `Reorder Now` outline button on the right.
- **InventoryRulesSection** (ReUI `Frame` + `FrameHeader` + `FramePanel`, `dense spacing="sm"`, `shadow-none!`): header carries title + Auto Reorder `Switch`; panel contains a 2x2 grid of inputs (Threshold Qty, Safe Stock Qty, Reorder Qty, Lead Time with `InputGroupAddon` `days` suffix) followed by a 5-column stats strip (Status badge, Delta badge, Velocity, Next Reorder, Updated By).
- **ShippingSection** (Frame + Tabs in the header): `Custom Package` / `Carrier Package` line-style tabs; panel contains Package Name input, a 2-column row (Package Type Select + Total Weight `InputGroupAddon` `kg`), a 4-column dimension row (Length / Width / Height inputs + unit `Select` aligned to the input baseline via grid `items-end`), and a `Save package for future orders` `Checkbox`.
- **ProductPanel** (right column): product image card, name + description, then a small `<dl>` with SKU (mono), Category, `Rating` primitive, Price.

## Reused Blocks
- `application/sheet/sheet-6` - sheet anatomy: trigger + custom-width `SheetContent` + sticky header / scrollable body / sticky footer
- `solutions/inventory/solution-inventory-7` - responsive body pattern (single ScrollArea below `lg`, two side-by-side ScrollAreas above `lg` joined by a vertical `Separator`), `Frame dense spacing="sm"` + `FrameHeader` `py-1.5!` + `FramePanel` `shadow-none!` conventions, header SKU/created/updated meta with reui-dot separators, and the wide sheet width `w-[min(60rem,calc(100vw-2rem))]`.

## Layout Grid
- Sheet width: `w-[min(60rem,calc(100vw-2rem))]` - never exceeds 960px, never narrower than viewport - 2rem padding
- Body responsiveness:
  - Below `lg`: a single `<ScrollArea>` wraps left + right content stacked with a horizontal `Separator` between them so every input on the left stays reachable on mobile
  - At `lg+`: a `flex-row` with the left panel taking `flex-1` and the right panel at `w-[320px]`, each with its own `<ScrollArea>` and a vertical `Separator` between
- Inventory Rules form: 2-column grid for inputs, 5-column grid for the stats strip - both reflow to 2-up on narrow widths
- Shipping dimensions row: `grid-cols-[1fr_1fr_1fr_5rem]` with `items-end` so the unit `Select` aligns to the bottom of the labeled inputs without inheriting a separate label slot

## LLM Guidance
Keep the three-section left column (`CurrentStockRow` / `InventoryRulesSection` / `ShippingSection`) and the single right column (`ProductPanel`). The Frame primitives use the same `dense spacing="sm"` + `py-1.5!` + `shadow-none!` overrides as solution-inventory-7 - keep that triad together when adding new sections so density stays consistent across the sheet. When the form needs more fields, append them inside the existing `FieldGroup` blocks (gap-4) rather than introducing new wrappers. The Auto Reorder switch lives inside FrameHeader; if you need to add more header controls, keep them inside a horizontal `Field` so the label/control gap stays at 8px. The bottom action cluster is split intentionally - `Print Label` on the left signals the secondary side-effect action, while `Cancel` and `Save` cluster on the right per the sheet-6 pattern. The right-rail summary is read-only by design; if you need to edit fields from there, move them into the left panel rather than wiring inputs into the summary `<dl>`.