Kit builder

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

A kit (bundle) made of standalone products, and how many its parts' stock can make. Sell as a kit; the parts in one kit with units per kit, removable, added by search (another kit refused: a kit can't hold a kit, nor itself); the packing slip shows the kit or each part, pick lists always the parts. Unsaved changes said; saving changes orders imported from then on while orders already in keep their parts and revision (recent orders listed with the revision they used). Beside it, following the draft: kits the parts can make on its tone, the part or parts that limit it named, or Unknown with the parts whose stock isn't known (never zero); stock as of when, said when stale; a kit has no stock of its own; per part, units per kit, on hand, allocated, available and the kits it allows, the limiting row marked.

Use it for

A product sold as a set of other products, whose availability comes from its parts' stock.
Where an unknown count must stay unknown and the limiting part should be named.

Not for

A product's own stock levels (an inventory list).
Building a purchase order (purchase-orders).

Anatomy

header: the tool's mark, kit name and SKU, Sell as a kit
parts: each part led by its units per kit as a figure that edits in place, remove on attention; Add a part opening the search; the refusal; packing slip (The kit · Each part, pick lists a hint); the save bar (what saving changes a hint)
availability: the total (no stock of its own a hint), what limits it or why it's unknown, as of, the parts' stock table (on a phone: per kit, available, makes), recent orders

States

no parts, editing (unsaved), saved, save refused, a kit refused as a part
kits available, none, unknown; stale stock; the limiting part
phone: one column, the stock table scrolls sideways
right to left: mirrored
reduced motion: through the tokens

Keyboard

Tab through Sell as a kit, each part's units (arrows step) and remove, Add a part, the slip choice, Save

Motion

Nothing runs at rest.

Props

Prop	Type	Default	Description
`kit` (required)	`{ sku: string; name: string; }`	—
`definition`	`KitDefinition`	—	The saved definition (controlled).
`defaultDefinition`	`KitDefinition`	—
`onDefinitionChange`	`((definition: KitDefinition) => void)`	—
`defaultDraft`	`KitDefinition \| null`	—	A draft at first (a kit reopened mid-edit).
`products` (required)	`KitProduct[]`	—
`stock` (required)	`Record<string, PartStock \| null>`	—	Stock by SKU; a missing SKU is unknown.
`asOf` (required)	`string`	—	When the stock was read.
`staleAfter`	`number`	—	Older than this many minutes is said as stale.
`now`	`string`	—
`orders`	`KitOrder[]`	—
`onSave` (required)	`(draft: KitDefinition) => Promise<KitDefinition>`	—	Saves; resolve with the saved definition (its new revision), reject with why not.
`product`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.

Built from

Dependencies

lucide-react

Import

import { KitBuilder } from "@beamline/kit-builder";

Get it

Kit builder 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

Kit builderComplete system · $49

A kit (bundle) made of standalone products, and how many its parts' stock can make.

A kit being edited

Two enamel mugs are being added to the Weekend camp kit. The availability beside it follows the draft: three kits, limited by the gas canisters (four per kit, 13 available). Saving changes orders imported from now on. FH-10533 keeps the parts it had. Adding another kit, such as the Camp cook set, is refused.

0 × 0full

States

A part's count unknown makes the total unknown, never zero. When a part runs short, no kits can be made. Stock read long ago is said.