shadcn.io is not affiliated with official shadcn/ui
Label Printer CRUD Block for Vue
A warehouse's label templates with an editor that draws the label to scale as you pick a size and fields, works out how many labels fit an A4 sheet and saves the drawn label as a real SVG file.
Installation
Overview
Let a warehouse design its labels and see them as they will print, with this label printer for Vue with Ark UI. A hairline frame with a plus mark on each corner holds four templates at the start and, at the end, the chosen one in an editor. Above the fields the label is drawn to scale in an inset stage: a Segment Group sets its size (Shelf 62 by 29 mm, Parcel 99 by 68, Badge 86 by 54), a Toggle Group puts the name, a barcode, the date and a logo mark on it, and the label text, an eight-digit code and the number of copies are typed in Fields. "10 labels fit 1 sheet of 10" is derived from the size on an A4 sheet. Edits apply at once. Download SVG, the only Shine Button, saves the drawn label as a real, true-size SVG file; Prepare print only says what would be printed, and nothing is. "New template", an outline Button in the header, opens a Popover that starts one from a size. Delete asks in an Alert Dialog and leaves an Undo. The panel is ruled by Guides. For warehouses, shops, events and any desk that prints labels in batches.
FAQ
How do I add my own sizes and fields?
Edit SIZES (a name, a width and a height in millimetres, and a type size) and PARTS (the toggles). Each template has an id, a name, a size, a list of parts, the label text, an eight-digit code and the number of copies. The drawing is built from those by shapesOf, one list of rectangles and text that both the preview and the SVG file read.
What does Download SVG save?
One label, true to size: the file's width and height are in millimetres and its drawing is in black on white with plain shapes and text, so it opens in any editor and prints at scale. It is built in the browser and saved with a download link, and nothing is sent. The copies setting is not in the file; it only drives the sheet count.
Does the barcode scan?
No. It is drawn from the eight digits you type, one pattern of bars per digit with guards at both ends, so it changes with the code, but it is not a standard symbology and carries no check digit. For scannable codes, draw an EAN or Code 128 from a library in the same place.
How is the sheet count worked out?
From a 190 by 277 mm printable A4 area: how many labels fit across and down at the chosen size, then the copies divided by that number, rounded up. Changing the size or the copies updates the sentence under the drawing and the polite line.