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

# Migrate Sticky from Polaris React

Use app-owned `position: sticky` only when the content must remain in view within its scroll container. Test overlap, zoom, small screens, and keyboard focus.

***

## Choose the destination

| Polaris React | Polaris web components | Migration type |
| - | - | - |
| `Sticky` | App-owned CSS using `position: sticky` | Native CSS |

***

## Map sticky responsibilities

| Polaris React usage | Polaris web components | Migration notes |
| - | - | - |
| Page actions or title content | `s-page` action slots | Move important actions to the Shopify admin title bar. |
| Contextual save controls | `data-save-bar` or Save Bar API | Use the host save bar for unsaved form state. |
| `boundingElement` and offsets | Remove with the old layout | Recheck content occlusion, focus visibility, zoom, and small containers. |

***

## Migrate the call site

1. Document the layout constraint that caused `Sticky` to be used.

2. Apply narrowly scoped app-owned CSS to the element responsible for that behavior.

3. Test responsive layout, zoom, overflow, and keyboard focus.

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

***

## Preserve these behaviors

* Readable full content and visible keyboard focus.
* Behavior at narrow widths, high zoom, and long translated content.
* Containment so the rule doesn't change unrelated surfaces.

***

## Test and remove Polaris React

Test the migrated `Sticky` behavior at narrow widths, 200% zoom, and with long translated content. Verify full content remains available and keyboard focus remains visible.

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.

***