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

# Migrate Text​Container from Polaris React

Use a block-direction stack for vertical rhythm between text elements. Keep headings, paragraphs, and lists semantic rather than wrapping all content in generic text.

***

## Choose the destination

| Polaris React | Polaris web components | Migration type |
| - | - | - |
| `TextContainer` | `s-stack direction="block"` | Compose |

***

## Map text-container properties

| Polaris React | Polaris web components | Migration notes |
| - | - | - |
| `children` | Children of `s-stack direction="block"` | Keep headings, paragraphs, and lists as semantic elements. |
| `spacing="tight"` | A small documented `gap` | Verify dense copy remains readable. |
| `spacing="loose"` | A larger documented `gap` | Use for separate ideas, not between a field and its error. |

***

## Migrate the call site

1. Identify each responsibility currently hidden behind `TextContainer`: 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 `TextContainer` 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 `TextContainer` 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 TextContainer

##### Polaris web components

```tsx
export function TextContainerMigrationExample() {
  return (
    <><s-stack direction="block" gap="small"><s-heading>Details</s-heading><s-paragraph>Product information</s-paragraph></s-stack></>
  );
}
```

##### Polaris React

```tsx
import {Text, TextContainer} from '@shopify/polaris';

export function TextContainerMigrationExample() {
  return (
    <TextContainer spacing="tight">
      <Text as="h2" variant="headingSm">Details</Text>
      <p>Product information</p>
    </TextContainer>
  );
}
```

***