---
title: Migrate InlineCode from Polaris React
description: Learn how to migrate Polaris React InlineCode to Polaris web components.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/inline-code
  md: >-
    https://shopify.dev/docs/apps/build/app-home/migrate-from-polaris-react/inline-code.md
api_name: app-home
---

# Migrate Inline​Code from Polaris React

Use a native `code` element for inline code and identifiers. Preserve surrounding sentence semantics and add a preformatted container only for code blocks.

***

## Choose the destination

| Polaris React | Polaris web components | Migration type |
| - | - | - |
| `InlineCode` | Native `code` element | Native HTML |

***

## Map inline code

| Polaris React | Polaris web components | Migration notes |
| - | - | - |
| `children` | Native `code` content | Keep short identifiers, values, commands, or paths inline. |
| Surrounding text | `s-paragraph` or another semantic text element | Keep punctuation outside the code element unless it belongs to the literal. |
| Multiline content | A code block | Preserve whitespace and copyability for commands and examples. |

The native `code` element provides the semantics. Any `s-box`, stack, background, border radius, or padding in an example is optional visual composition, not part of the replacement API. Add those only when the surrounding design needs a distinct code treatment, and keep the `code` element itself around the literal value.

***

## Migrate the call site

1. Choose the native element whose semantics match the `InlineCode` call site.

2. Rebuild its accessible name and relationships before adding layout or app-owned styling.

3. When the element is interactive or form-associated, connect its native events and form behavior to existing app state.

4. After verification, remove the `InlineCode` import and any Polaris-only state, wrappers, or helpers that no longer have a caller.

***

## Preserve these behaviors

* Native semantics, accessible names, and document structure.
* Keyboard and form behavior supplied by the browser, where applicable.
* App state, validation, and responsive layout around the element.

***

## Test and remove Polaris React

Test the migrated `InlineCode` with browser and accessibility semantics in mind. Verify document structure, keyboard and form behavior where applicable, accessible relationships, and app-owned state changes.

Don't remove `@shopify/polaris` while another component still imports it. Once all call sites are migrated, remove the package and its provider-level setup, then run the app's full test suite.

***

## Migration example

## Migrating InlineCode

##### Polaris web components

```tsx
export function InlineCodeMigrationExample() {
  return (
    <s-stack direction="inline">
      <s-box background="strong" borderRadius="small" padding="small-100 small">
        <code>product.status</code>
      </s-box>
    </s-stack>
  );
}
```

##### Polaris React

```tsx
import {InlineCode} from '@shopify/polaris';


export function InlineCodeMigrationExample() {

  return (
    <InlineCode>product.status</InlineCode>
  );
}
```

***