# Box

A box component is a container that can be used to group and display content in a consistent manner.

```tsx
import React from 'react';

import {
  Box,
  Image,
  Navigator,
  Screen,
  ScrollView,
  reactExtension,
} from '@shopify/ui-extensions-react/point-of-sale';

const ImageModal = () => {
  return (
    <Navigator>
      <Screen name="ImageBox" title="ImageBox">
        <ScrollView>
          <Box
            blockSize="100px"
            inlineSize="100px"
            paddingInlineStart="100"
            paddingInlineEnd="100"
            paddingBlockEnd="100"
            paddingBlockStart="100"
          >
            <Image
              src="example.png"
              size="contain"
            />
          </Box>
        </ScrollView>
      </Screen>
    </Navigator>
  );
};

export default reactExtension(
  'pos.home.modal.render',
  () => <ImageModal />,
);

```

```ts
import {
  extend,
  Navigator,
  Screen,
  ScrollView,
  Box,
  Image,
} from '@shopify/ui-extensions/point-of-sale';

export default extend(
  'pos.home.modal.render',
  (root) => {
    const navigator =
      root.createComponent(Navigator);

    const imageBoxScreen =
      navigator.createComponent(Screen, {
        name: 'ImageBox',
        title: 'ImageBox',
      });

    const scrollView =
      imageBoxScreen.createComponent(ScrollView);

    const box = scrollView.createComponent(Box, {
      blockSize: '100px',
      inlineSize: '100px',
      paddingInlineStart: '100',
      paddingInlineEnd: '100',
      paddingBlockStart: '100',
      paddingBlockEnd: '100',
    });

    const image = box.createComponent(Image, {
      src: 'example.png',
      size: 'contain',
    });

    box.appendChild(image);
    scrollView.appendChild(box);
    imageBoxScreen.appendChild(scrollView);
    navigator.appendChild(imageBoxScreen);

    root.appendChild(navigator);
  },
);

```

## Box

### BoxProps

### blockSize

value: `SizeUnitsOrAuto`

Adjust the block size.

Auto takes the block size of the box's children.

### inlineSize

value: `SizeUnitsOrAuto`

Adjust the inline size.

Auto takes the inline size of the box's children.

### maxBlockSize

value: `SizeUnitsOrNone`

Adjust the maximum block size.

### maxInlineSize

value: `SizeUnitsOrNone`

Adjust the maximum inline size.

### minBlockSize

value: `SizeUnits`

Adjust the minimum block size.

### minInlineSize

value: `SizeUnits`

Adjust the minimum inline size.

### padding

value: `PaddingKeys`

Adjust the padding of all edges in pixels.

### paddingBlock

value: `PaddingKeys`

Adjust the block-padding.

This overrides the block value of `padding`.

### paddingBlockEnd

value: `PaddingKeys`

Adjust the block-end padding.

This overrides the block-end value of `paddingBlock`.

### paddingBlockStart

value: `PaddingKeys`

Adjust the block-start padding.

This overrides the block-start value of `paddingBlock`.

### paddingInline

value: `PaddingKeys`

Adjust the inline padding.


This overrides the inline value of `padding`.

### paddingInlineEnd

value: `PaddingKeys`

Adjust the inline-end padding.

This overrides the inline-end value of `paddingInline`.

### paddingInlineStart

value: `PaddingKeys`

Adjust the inline-start padding.

This overrides the inline-start value of `paddingInline`.