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

# Migrate Media​Card from Polaris React

Use the media card pattern when media, supporting content, and an action form one composition. Use a normal section and image when the media is simply page content.

***

## Choose the destination

| Polaris React | Polaris web components | Migration type |
| - | - | - |
| `MediaCard` | [Media card pattern](https://shopify.dev/docs/api/app-home/patterns/compositions/media-card) | Pattern |

***

## Map media card content

| Polaris React | Polaris web components | Migration notes |
| - | - | - |
| `title` and `description` | Pattern heading and paragraph | Keep the content tied to the media and action. |
| `primaryAction` and `secondaryAction` | Explicit buttons or links | Reconnect loading, navigation, success, and failure behavior. |
| `portrait` and media children | Choose the pattern layout and use `s-image` or `s-thumbnail` | Recheck crop, alternative text, and reading order. |

***

## Migrate the call site

1. Trace the complete feature around `MediaCard`, including any data, state, actions, loading, empty, and error paths it has.

2. Implement the linked Polaris web components pattern as one coherent feature.

3. Reconnect app-owned state and backend operations, then migrate the old feature as a single slice.

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

***

## Preserve these behaviors

* The data and state that determine what the feature displays.
* User actions, confirmation, and recovery behavior that apply to the feature.
* Relevant loading, empty, error, and responsive states.

***

## Test and remove Polaris React

Test the complete migrated `MediaCard` feature with realistic data. Exercise each state transition and action result, including the loading, empty, error, and responsive paths that apply.

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 MediaCard

##### Polaris web components

```tsx
export function MediaCardMigrationExample() {
  return (
    <s-section padding="none">
      <s-grid gridTemplateColumns="2fr 3fr" gap="none" alignItems="center">
        <s-image
          alt="Colorful summer clothing"
          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3Crect width='600' height='400' fill='%23f6d7c3'/%3E%3Ccircle cx='470' cy='85' r='48' fill='%23f7b84b'/%3E%3Cpath d='M0 310 145 170l105 105 82-86 268 211H0Z' fill='%236aa57a'/%3E%3Cpath d='M0 350 180 225l92 82 76-61 252 154H0Z' fill='%233f7652'/%3E%3C/svg%3E"
          aspectRatio="3/2"
          objectFit="cover"
        ></s-image>
        <s-box padding="base">
          <s-stack gap="base">
            <s-heading>Summer collection</s-heading>
            <s-paragraph>Explore seasonal products.</s-paragraph>
            <s-button>View collection</s-button>
          </s-stack>
        </s-box>
      </s-grid>
    </s-section>
  );
}
```

##### Polaris React

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


export function MediaCardMigrationExample() {

  return (
    <MediaCard
      title="Summer collection"
      primaryAction={{content: 'View collection'}}
      description="Explore seasonal products."
    >
      <img
        alt="Colorful summer clothing"
        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400'%3E%3Crect width='600' height='400' fill='%23f6d7c3'/%3E%3Ccircle cx='470' cy='85' r='48' fill='%23f7b84b'/%3E%3Cpath d='M0 310 145 170l105 105 82-86 268 211H0Z' fill='%236aa57a'/%3E%3Cpath d='M0 350 180 225l92 82 76-61 252 154H0Z' fill='%233f7652'/%3E%3C/svg%3E"
        style={{width: '100%', height: '100%', objectFit: 'cover'}}
      />
    </MediaCard>
  );
}
```

***