build69
Sign inGet API key
build69  /  Components  /  Data Display  /  Barcode

Barcode

v1.0.1Updated 20 Jul 2026

1D barcode tile rendering CODE128, EAN-13, EAN-8, UPC-A or CODE39 symbologies via jsbarcode into an SVG ref inside useEffect, making it SSR-safe. Bar width, height, colours and the human-readable text line are all configurable, with an optional caption under the code. Values that are invalid for the chosen format (a bad EAN-13 check digit, Thai text in CODE39) surface as a danger-toned inline error state instead of throwing.

View source← Back to catalog

Preview

Live · 7 stories
Barcode FormatsOpen ↗
▸Why this is recommendedbarcodeean13ean8upc+8

Barcode — formats.

Recommended for+14
  • ✓EAN-13 / UPC product labels for retail goods
  • ✓CODE128 document references such as invoice numbers on a receipt
  • ✓Warehouse bin and shelf location labels
  • ✓Thailand Post / courier tracking number labels
  • ✓A scannable reference for a cashier scanner on a payment slip
  • ✓Printing SKU tags for inventory stocktaking
Tags+6
barcodeean13ean8upccode128code39scanlabelskuinventorytrackingformats
Features+4
  • CODE128 / EAN13 / EAN8 / UPC / CODE39 symbologies via jsbarcode
  • Rendered in a useEffect against an SVG ref — nothing touches the DOM during render (SSR-safe)
  • Graceful invalid-value error state on a danger soft surface instead of throwing
  • Custom errorLabel to explain format constraints in your own words
  • Configurable bar width, bar height, line colour and background
  • Toggle the human-readable value line under the bars (displayValue)
  • Caption slot rendered as an accessible figcaption
  • role="img" with an auto "Barcode: {value}" aria-label, overridable
Not recommended for−2
  • ✕Scanning/decoding barcodes from camera input (render-only)
  • ✕2D payloads such as URLs or PromptPay payments (use QRCode)
  • ✕Validating a barcode value before submit (the error state is display-only)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Barcode" })

Usage

import { Barcode } from '@/components/data-display/barcode';

<Barcode
  value="INV-2026-00042"
  format="CODE128"
  height={44}
  width={1.6}
  caption="Reference for the cashier scanner"
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Text/digits encoded into the barcode

stringyes
format

Symbology (default CODE128)

'CODE128' | 'EAN13' | 'EAN8' | 'UPC' | 'CODE39'—
width

Width of a single bar in px (default 2)

number—
height

Height of the bars in px (default 64)

number—
displayValue

Render the human-readable value under the bars (default true)

boolean—
lineColor

Bar + text colour (default the foreground token)

string—
background

Background colour behind the bars (default transparent)

string—
caption

Caption rendered under the barcode as a figcaption

ReactNode—
errorLabel

Message shown when the value is invalid for the chosen format

ReactNode—
aria-label

Accessible description (default "Barcode: {value}")

string—

Related

Platform docsAll componentsSource files