# syncfusion-react-barcode

A skill for generating barcodes, QR codes and Data Matrix codes in React with Syncfusion components. Useful when codes go into a form, report or label.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 706 installs · ★ 3
- Author: Syncfusion Inc
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-barcode/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-barcode

## What it does

The skill covers three components from `@syncfusion/ej2-react-barcode-generator`: `BarcodeGeneratorComponent` for 1D codes (Code39, Code128, Code11, Code32, Code93, Codabar), `QRCodeGeneratorComponent` for QR codes and `DataMatrixGeneratorComponent` for compact labels. The agent picks the right type for your case and writes the JSX with the props you need.

Reference files inside cover each generator, styling and export. Appearance is set through `width`, `height`, `foreColor`, `backgroundColor` and the `displayText` object. Export runs through `exportImage(filename, format)` and `exportAsBase64Image(format)`, with JPG and PNG available. The component needs an `id` prop for export to work — that is the usual snag when you copy an example and the download button does nothing.

The skill does not ship the Syncfusion package itself, so the components still have to be installed in your project. From there the agent walks through the steps: choose a generator, add the import, set the value and dimensions, wire up an export button if you need one.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-barcode -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-barcode/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-barcode/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-barcode -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-barcode/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-barcode -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-barcode/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-barcode
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-barcode/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-barcode -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-barcode
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-barcode/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-barcode -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-barcode/SKILL.md

## When to use it
- generate a Code128 for SKUs and product codes
- build a QR code that links to a product page
- create a Data Matrix for package tracking
- match bar colours and size to a label layout
- download a barcode as PNG from a button click

## Example prompts
- Build a React component with a Code128 barcode bound to state
- Add a QR code for a product link and a button that downloads it as PNG
- Set foreColor and backgroundColor on a Data Matrix for label printing

## Similar
- [react-and-nextjs-data-visualization](https://affpapa.org/en/nevibecode/skills/react-and-nextjs-data-visualization.md) — skill · 13 installs
- [globe-gl](https://affpapa.org/en/nevibecode/skills/globe-gl.md) — skill · 1500 installs
- [coordinated-data-views](https://affpapa.org/en/nevibecode/skills/coordinated-data-views.md) — skill · 668 installs
- [vercel-react-view-transitions](https://affpapa.org/en/nevibecode/skills/vercel-react-view-transitions.md) — skill · 168100 installs
- [gsap-react](https://affpapa.org/en/nevibecode/skills/gsap-react.md) — skill · 66300 installs
- [stitch::react-components](https://affpapa.org/en/nevibecode/skills/stitchreact-components.md) — skill · 50400 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 15 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md