Label designer

A React block (a whole screen) in Beamline's CMS & media app.

A label template made against the real label: drawn at true proportions in millimetres with its size beside it; the code says what it holds (a QR links to the item's page, a DataMatrix carries the ID only); a missing value shows as “— unknown”; fields that don't fit on the label's height are named as left off. Making the PDF says it's ready and that nothing has been printed.

Use it for

Designing labels for tubes, boxes, parts or shelves from record fields.
Making a print-ready PDF of labels for a set of items.

Not for

Shipping labels from a carrier.
Showing a single QR code to scan (qr-code).

Anatomy

header: the product's mark, Label template
settings: label stock, width and height in mm; the fields on the label; the code and what it holds
preview: the item it previews with; the label to scale with its height and size; what doesn't fit; missing values; the PDF ready (not printed) with Open PDF; Make PDF

States

code: QR with a link, QR without a page, DataMatrix with the ID, none
fit: all fields, some left off
values: complete, some unknown
pdf: making, ready (not printed), stale after a change, failed (template kept)
phone: settings above the preview
right to left: mirrors the screen; the label itself prints as designed

Keyboard

Tab through stock, width, height, the fields, the code, the preview item, Open PDF and Make PDF

Motion

None of its own; the shared parts move.

Props

Prop	Type	Default	Description
`items` (required)	`LabelItem[]`	—	The items these labels are for.
`fields` (required)	`LabelField[]`	—	Fields a label can show; "name" and "id" read the item's own name and id.
`presets`	`{ name: string; width: number; height: number; }[]`	—	Label stock to pick from, in millimetres.
`defaultTemplate`	`Partial<LabelTemplate>`	—
`onMakePdf`	`((template: LabelTemplate, itemIds: string[]) => Promise<LabelPdf>)`	—	Make a print-ready PDF; it is not printed here.
`onOpenPdf`	`((url: string) => void)`	—
`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.
`defaultSample`	`string`	—	The item the preview shows first.

Built from

Dependencies

lucide-react

Import

import { LabelDesigner } from "@beamline/label-designer";

Get it

Label designer 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