Barcode

Pro

Self-contained Code 128 or EAN-13 barcode that fits any width and stays dark-on-white in both themes for reliable scanning. Bars draw in on open, and used codes get a redeemed stamp.

Preview

Installation

npx @lumioui/cli add pro/barcode

Usage

import { Barcode } from "@/components/ui/barcode/barcode";
<Barcode />

Examples

Gift card

A bookshop gift card in a wallet: the card face with its balance, the scannable card number, and a PIN the reader reveals only when a cashier asks for it.

Loyalty card

A coffee roaster's stamp card.

Scan card

A parcel-locker pickup code shown at full brightness.

Ticket strip

A cinema booking with one admission per seat.

API reference

Prop Type Default
value* string

Value to encode. Code 128: printable ASCII. EAN-13: 12 or 13 digits.

 —
format BarcodeFormat

Symbology. Default "code128".

 "code128"
height number

Bar height in px. Default 72.

 72
width number

Fixed width in px. Default: fill the parent.

 —
showText boolean

Show the human-readable line under the bars. Default true.

 true
text string

Code 128 only — display text instead of the raw value (e.g. grouped digits).

 —
textSize number

Human-readable font size in px. Default 14 (12 minimum).

 14
color string

Bar colour. Default near-black in both themes.

 —
backgroundColor string

Tile fill. Default white in both themes; "transparent" to drop the tile.

 BAR_PAPER
radius number

Tile corner radius in px. Default 12.

 12
quietZone number

Code 128 quiet zone in modules each side. Default 10 (spec minimum).

 10
paddingVertical number

Vertical tile padding in px. Default 12.

 12
animate boolean

Switch the tile on and draw the bars when the code opens or its value changes. Default true.

 true
redeemed boolean

The code has been used. Turning it on runs one sheen, dims the bars and stamps redeemedLabel over them. Default false.

 false
redeemedLabel string

Stamp text, e.g. "Redeemed 9:41". Default "Redeemed".

 "Redeemed"
className string —
accessibilityLabel string —