Barcode

Betav1.0.0

Code 128 (Set B) 1D 바코드를 의존성 없이 SVG 로 직접 렌더합니다. start + 데이터 + 모듈로-103 체크 + stop 을 인코딩해 실제 스캔 가능합니다. SKU·주문번호·자산 태그에 사용.

Loading…

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

<Barcode value="ORD-2026-0042" showValue />
<Barcode value="500009086" height={48} moduleWidth={2} />

// props: value, height, moduleWidth, quietZone, showValue

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/barcode.json

Variants

Sizes

height / moduleWidth 로 크기 조절.

Loading…

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

<Barcode value="ORD-2026-0042" showValue />
<Barcode value="500009086" height={48} moduleWidth={2} />

// props: value, height, moduleWidth, quietZone, showValue

Interactive

입력값을 실시간 인코딩 (ASCII 32–126).

Loading…

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

<Barcode value="ORD-2026-0042" showValue />
<Barcode value="500009086" height={48} moduleWidth={2} />

// props: value, height, moduleWidth, quietZone, showValue

Composition

Barcode (value, height, moduleWidth, quietZone, showValue)
├── SVG rects — Code 128B 인코딩
└── showValue — 하단 텍스트

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

Package	Version
clsx	`2.1.1`
tailwind-merge	`3.6.0`

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

utils