---
title: TextContainer
description: >-
  TextContainer is used to wrap text elements such as TextBlock and Heading, and
  provide consistent vertical spacing.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/textcontainer
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/textcontainer.md
---

# TextContainer

TextContainer is used to wrap text elements such as TextBlock and Heading, and provide consistent vertical spacing.

***

### Example

![textcontainer](https://shopify.dev/assets/assets/images/api/checkout-extensions/post-purchase/components/textcontainer-DURbjdf3.png)

##### JS

```ts
import {extend, TextBlock, TextContainer} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const textContainer = root.createComponent(TextContainer, undefined, [
    root.createComponent(TextBlock, undefined, 'TextBlock'),
    root.createComponent(TextBlock, undefined, 'TextBlock'),
    root.createComponent(TextBlock, undefined, 'TextBlock'),
  ]);

  root.appendChild(textContainer);
});
```

##### React

```tsx
import {render, TextContainer, TextBlock} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    <TextContainer>
      <TextBlock>TextBlock</TextBlock>
      <TextBlock>TextBlock</TextBlock>
      <TextBlock>TextBlock</TextBlock>
    </TextContainer>
  );
}
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| alignment? | `"leading" \| "center" \| "trailing"` | Align children's on the horizontal axis |
| spacing? | `"xtight" \| "tight" \| "loose" \| "xloose"` | Adjust spacing between children |

***