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

# Migrate Video​Thumbnail from Polaris React

Compose `s-thumbnail` or `s-image` with a clearly labelled play affordance. Preserve duration or playback state only when it is essential and available as text.

***

## Choose the destination

| Polaris React | Polaris web components | Migration type |
| - | - | - |
| `VideoThumbnail` | `s-thumbnail` or `s-image` with a custom play affordance | Compose |

***

## Map video-thumbnail properties

| Polaris React | Polaris web components | Migration notes |
| - | - | - |
| `thumbnailUrl` | `src` on `s-thumbnail` or `s-image` | Preserve meaningful alternative text. |
| `videoLength` | Visible duration text | Format the duration in app code and don't rely on an image overlay alone. |
| `onClick` and play icon | Labelled button, clickable, or link with a supplementary `s-icon` | Name the action, such as "Play setup video". |

***

## Migrate the call site

1. Identify each responsibility currently hidden behind `VideoThumbnail`: layout, semantics, state, actions, and responsive behavior.

2. Build the documented composition for those responsibilities; don't create a compatibility wrapper that accepts the old API.

3. Reconnect app state and verify the composition at every existing call site.

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

***

## Preserve these behaviors

* Information hierarchy, reading order, and accessible relationships.
* App-owned state and every action or navigation outcome.
* Responsive behavior and focus order across the composed elements.

***

## Test and remove Polaris React

Test the complete `VideoThumbnail` composition at each responsive size used by the app. Verify reading and focus order, accessible relationships, keyboard interaction, and every action outcome.

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 VideoThumbnail

##### Polaris web components

```tsx
export function VideoThumbnailMigrationExample() {
  return (
    <s-clickable accessibilityLabel="Play setup video, 1 minute 20 seconds">
      <s-stack direction="inline" gap="base" alignItems="center">
        <s-thumbnail
          src="https://cdn.shopify.com/static/images/polaris/thumbnail-wc_src.jpg"
          alt="White sneaker shown in the setup video"
        />
        <s-stack gap="small-100">
          <s-stack direction="inline" gap="small" alignItems="center">
            <s-icon type="play-circle" />
            <s-text type="strong">Play setup video</s-text>
          </s-stack>
          <s-text color="subdued">1:20</s-text>
        </s-stack>
      </s-stack>
    </s-clickable>
  );
}
```

##### Polaris React

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


export function VideoThumbnailMigrationExample() {

  return (
    <VideoThumbnail videoLength={80} thumbnailUrl="https://cdn.shopify.com/static/images/polaris/thumbnail-wc_src.jpg" onClick={() => {}} />
  );
}
```

***