# Barcode

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.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/barcode
```

## Import

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

## Variants

- `gift-card` — Gift card: `npx @lumioui/cli add pro/barcode-gift-card`
- `loyalty` — Loyalty card: `npx @lumioui/cli add pro/barcode-loyalty`
- `scan-card` — Scan card: `npx @lumioui/cli add pro/barcode-scan-card`
- `ticket-strip` — Ticket strip: `npx @lumioui/cli add pro/barcode-ticket-strip`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `string` | Value to encode. Code 128: printable ASCII. EAN-13: 12 or 13 digits. |
| `format?` | `BarcodeFormat` | Symbology. Default "code128". |
| `height?` | `number` | Bar height in px. Default 72. |
| `width?` | `number` | Fixed width in px. Default: fill the parent. |
| `showText?` | `boolean` | Show the human-readable line under the bars. Default 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). |
| `color?` | `string` | Bar colour. Default near-black in both themes. |
| `backgroundColor?` | `string` | Tile fill. Default white in both themes; "transparent" to drop the tile. |
| `radius?` | `number` | Tile corner radius in px. Default 12. |
| `quietZone?` | `number` | Code 128 quiet zone in modules each side. Default 10 (spec minimum). |
| `paddingVertical?` | `number` | Vertical tile padding in px. Default 12. |
| `animate?` | `boolean` | Switch the tile on and draw the bars when the code opens or its value  changes. Default true. |
| `redeemed?` | `boolean` | The code has been used. Turning it on runs one sheen, dims the bars and  stamps `redeemedLabel` over them. Default false. |
| `redeemedLabel?` | `string` | Stamp text, e.g. "Redeemed 9:41". Default "Redeemed". |
| `className?` | `string` | — |
| `accessibilityLabel?` | `string` | — |

Source: https://lumioui.com/components/barcode