---
title: Migrate to the Polaris QR code component
description: >-
  Learn how to migrate the QRCode component to Polaris web components in
  checkout and customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/qr-code
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/qr-code.md
---

# Migrate to the Polaris QR code component

The Polaris QR code component renders a scannable QR code that encodes a URL or other content. It replaces the previous [`QRCode`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/other/qrcode) component and is available as [`<s-qr-code>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/qr-code) in API versions 2025-10 and newer.

***

## Updated properties

The following properties are different in the Polaris QR code component.

### size

The [`size`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/qr-code#properties-propertydetail-size) prop values have changed, and the default has been renamed.

| Previous value | New value | Migration notes |
| - | - | - |
| `'auto'` (default) | `'base'` (default) | Use `'base'` for the default size. |
| `'fill'` | `'fill'` | No change needed. |

## Migrating size values

##### Latest (Preact)

```tsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-qr-code
      content="https://shopify.com"
      size="base"
      accessibilityLabel="Visit our store"
    ></s-qr-code>
  );
}
```

##### Pre-Polaris (2025-07)

```tsx
import {
  reactExtension,
  QRCode,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <QRCode
      content="https://shopify.com"
      size="auto"
      accessibilityLabel="Visit our store"
    />
  );
}
```

### on​Error

The previous `QRCode` `onError` prop still uses `onError` in Preact, but it now handles the [`error`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/qr-code#events-propertydetail-error) event. The handler now receives an `Event` instead of being called with no arguments.

***