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

# Migrate Keyboard​Key from Polaris React

Use a native `kbd` element for user input such as keys or shortcuts. Keep an accompanying text description instead of relying on visual key styling alone.

***

## Choose the destination

| Polaris React | Polaris web components | Migration type |
| - | - | - |
| `KeyboardKey` | Native `kbd` element | Native HTML |

***

## Map keyboard key content

| Polaris React | Polaris web components | Migration notes |
| - | - | - |
| `children` | Native `kbd` content | Use the visible key label, such as `Esc` or `Enter`. |
| Key combination | Separate `kbd` elements with text separators | Make the order and modifier relationship readable. |
| Shortcut behavior | Existing app-owned keyboard handler | A `kbd` element documents a shortcut. It doesn't register one. |

***

## Migrate the call site

1. Choose the native element whose semantics match the `KeyboardKey` 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 `KeyboardKey` 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 `KeyboardKey` 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 KeyboardKey

##### Polaris web components

```tsx
export function KeyboardKeyMigrationExample() {
  return (
    <><kbd>⌘ K</kbd></>
  );
}
```

##### Polaris React

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


export function KeyboardKeyMigrationExample() {

  return (
    <KeyboardKey>⌘ K</KeyboardKey>
  );
}
```

***