Sample storage

A React block (a whole screen) in Beamline's Inventory app.

Where physical items are kept (rooms, freezers, shelves, racks, boxes) and acting on several at once. The storage tree is browsed apart from moving: Move to… offers only places a location can go, never itself or anything inside it; temperatures always carry their unit; a box shows its grid, or says it has none and lists items without made-up positions. A personal list collects items across searches; every action names the exact items it touches; moving into a box says who can edit them there; items that fail to move stay on the list for a retry; marking items used up keeps their history.

Use it for

Keeping track of where individual containers or items sit in nested storage.
Collecting items across searches to act on them together.

Not for

Shop stock counted by location (inventory-item, stock-count).
A plate's wells (the spatial-grid signature).

Anatomy

header: the product's mark, Storage
tree: places nested, each with its temperature
place: name, kind and path, Move to…; temperature, grid or gridless, who can edit; what happened; the items inside with positions
my list: find items; results with a box to collect; the list with remove, Clear; Move to a box, Mark used up; the confirmation naming each item and the access change

States

place: with or without temperature; gridded, gridless; moved, refused (still where it was)
list: empty, collecting across searches; confirming a move or use-up; moved; some failed (they stay)
item: available, used up
phone: tree, place and list stacked
right to left: mirrors

Keyboard

Tab through the tree's folds and places, Move to…, each item's box, find, the list's controls and the confirmation

Motion

The fold's chevron turns.

Props

Prop	Type	Default	Description
`locations` (required)	`StorageLocation[]`	—
`items` (required)	`StoredItem[]`	—
`onMoveLocation`	`((id: string, toId: string) => Promise<void>)`	—	Move a place (and all it holds) inside another.
`onMoveItems`	`((ids: string[], boxId: string) => Promise<MoveResult>)`	—	Move items into a box; resolve with the ones that didn't move.
`onConsume`	`((ids: string[]) => Promise<void>)`	—
`defaultLocation`	`string`	—
`defaultList`	`string[]`	—
`defaultQuery`	`string`	—
`product`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`defaultPending`	`StorageAction`	—	Open with this action waiting for confirmation (the list must not be empty).

Built from

Dependencies

lucide-react

Import

import { SampleStorage } from "@beamline/sample-storage";

Get it

Sample storage is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Sample storageComplete system · $49

Where physical items are kept (rooms, freezers, shelves, racks, boxes) and acting on several at once.

Collecting across searches

Two antibodies from one search and a plasmid from another are on my list. Moving them to Shared reagents names each one and says only the Reagents team can edit them there; the tube checked out on a bench stays on the list. Temperatures carry their unit; Box A has positions, Box B doesn't pretend to.

0 × 0full

A gridless box