New to KendoReact? Start a free 30-day trial

Getting Started with the KendoReact Barcodes
Premium

Updated on Mar 4, 2026

This guide provides essential information about using the KendoReact Barcodes package—you will learn how to install the package, add Barcodes to your project, style the components, and activate your license. The steps demonstrated in this guide are applicable to all KendoReact Barcodes.

After completing this guide, you will be able to reproduce the following example.

Change Theme

Theme

Loading ...

Install the Component

npm i @progress/kendo-react-barcodes

Importing the Components

After installing the Barcodes package, import the desired components in the React App. This guide shows how to add the Barcode.

In the App component file of your React project (for example, src/App.js), add the following code:

jsx

// ES2015 module syntax
import { Barcode } from '@progress/kendo-react-barcodes';

jsx

// CommonJS format
const { Barcode } = require('@progress/kendo-react-barcodes');

If your project requires more Barcodes, you can import them too. The Barcodes package provides the following components:

Barcode
QR Code

Using the Components

After installing the Barcodes package and importing the components, add the Barcode's tags to the App component file of your React project (for example, src/App.js).
js
```
const App = () => <Barcode type="EAN13" value="123456789012" />;
```
To style the Barcode, install and import the Default theme, which is one of several beautiful themes for KendoReact.

2.1. Install the Default theme package.
sh
```
npm i @progress/kendo-theme-default
```
2.2. Import the CSS file from the package in src/App.js. Add this import before your existing App.css import.
jsx
```
import '@progress/kendo-theme-default/dist/all.css';
```
Build and run the application by typing the following command in the root folder of your project:
sh
```
npm start
```

Activating Your License Key

For information on activating your license, see the Set Up Your KendoReact License Key page.

Dependencies

The Barcodes package requires you to install the following peer dependencies in your application:

Package Name	Description
react 18.0.0*	Contains the functionality necessary to define React components.
react-dom	Contains the React renderer for the web.
@progress/kendo-drawing	Contains the Drawing library, which provides interactive vector graphics.
@progress/kendo-licensing	Contains the internal infrastructure related to licensing.

Getting Started with the KendoReact BarcodesPremium