• What is KendoReact
  • Getting Started
  • Server Components
  • Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Configuration Options

The QR Code provides a set of configuration options, which enable you to fine-tune its behavior.

The following configuration settings are supported by the QR Code:


To set the QR Code dimensions, use either of the following approaches:

  • Use CSS rules to set the size of the QR Code or its container.
  • Use the size prop, which defines the width and height, to set the dimensions in any CSS unit.

If the QR Code size is insufficient for the current value and error correction level, the component will throw an error. Always test the application with the values you expect to see in actual use.

View Source
Change Theme:

Color and Background

To customize the QR Code foreground and background color, set the color and background options. You can further extend the background by specifying an optional padding.

Ensure that the chosen color combination provides adequate contrast and test it with the typical readers you intend to target.

View Source
Change Theme:


The QR Code can display a simple rectangular border as part of itself. You can create more complex borders by using CSS.

View Source
Change Theme:

See Also

In this article

Not finding the help you need?