---
title: Tiles
description: >-
  The Tiles component is used to lay out elements as equally-sized elements,
  optionally wrapping on multiple lines as well as a stack when space is
  limited.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/tiles
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/tiles.md
---

# Tiles

The Tiles component is used to lay out elements as equally-sized elements, optionally wrapping on multiple lines as well as a stack when space is limited. If you have a direct child of `Tiles` that you don’t want to stretch, wrap that child in a `View` component.

##### JS

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

extend('Checkout::PostPurchase::Render', (root) => {
  const tiles = root.createComponent(Tiles, undefined, [
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
    root.createComponent(View, {border: 'base', padding: 'base'}, 'View'),
  ]);

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

##### React

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

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

function App() {
  return (
    <Tiles>
      <View border="base" padding="base">
        View
      </View>
      <View border="base" padding="base">
        View
      </View>
      <View border="base" padding="base">
        View
      </View>
    </Tiles>
  );
}
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| maxPerLine? | `number` | Number of tiles per line. |
| breakAt? | `number` | Width of the component when the tiles stack on the cross-axis. Each tile will then take all the available space. It accepts a number in pixel. If not specified, the tiles will never stack and each of them will progressively shrink when the screen is resized. |
| alignment? | `"leading" \| "center" \| "trailing"` | Position tiles along the cross axis |
| spacing? | `"xtight" \| "tight" \| "loose" \| "xloose"` | Adjust spacing between tiles |

***