---
title: View
description: A View is a generic container component.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/view
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/view.md
---

# View

A View is a generic container component. Its contents will always be their "natural" size, so this component can be useful in layout components (like `Layout`, `Tiles`, `BlockStack`, `InlineStack`) that would otherwise stretch their children to fit.

***

### Example

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

##### JS

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

extend('Checkout::PostPurchase::Render', (root) => {
  const view = root.createComponent(View, undefined, 'View');

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

##### React

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

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

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

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| inlinePadding? | `"xtight" \| "tight" \| "loose" \| "xloose"` | Adjust the inline padding |
| blockPadding? | `"xtight" \| "tight" \| "loose" \| "xloose"` | Adjust the block padding |

***