---
title: "Components — Box"
canonical: https://sky-ui.cf.sky.com/components/box
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Components — Box

Box is the lowest-level component that could receive most of the system props such as border, colour, padding etc.

```js
import { Box } from '@sky-uk/ui-core';
```

---

The `Box` component is a special component that has no styling applied by default. It surfaces a number of the system modifiers available from the library.

---

## System Modifiers

The `Box` component supports the props applied using the following system functions:

- [background](/core/system/background/)
- [border](/core/system/border/)
- [border-radius](/core/system/border-radius/)
- [display](/core/system/display/)
- [box-shadow](/core/system/box-shadow/)
- [flex-child](/core/system/flex-child/)
- [flex-parent](/core/system/flex-parent/)
- [grid-child](/core/system/grid-child/)
- [height](/core/system/height/)
- [margin](/core/system/margin/)
- [overflow](/core/system/overflow/)
- [padding](/core/system/padding/)
- [position](/core/system/position/)
- [width](/core/system/width/)

---

## Do

**Tip:** The<code>Box</code> component should only be used to apply re-usable patterns where making a brand
  new component does not make sense. A good example of this would be if you need to wrap some
  content in a box that has a gradient and some padding.

```tsx
<Box
    $bgGradient="channels.one"
    $borderRadius={1}
    $padding={4}
>
    Hello World
</Box>
```

---

## Don't

### Don't extend the Box component

**Warning:** The <code>Box</code> component should <strong>never</strong> be extended to create a new
  <code>styled</code> component. See the "Customising Components" and "Composition" sections of the [Developer
  Quickstart](/intro-to-sky-ui/developer-quickstart/) for information on how to create your own components.

```jsx
// Don't do this
const MyComponent = styled(Box)`
    background-color: red;
`

// or this
<MyComponent as={Box} />
```

### Don't use Box as a div replacement

**Warning:** The <code>Box</code> component is <strong>not</strong> a replacement for the <code>div</code>
  element, do <strong>not</strong> use it if you are not using any part of it's API.

```jsx
// Don't do this
<Box>This is bad</Box>
```

---

## Be sensible

**Important:** Be sensible when using the <code>Box</code> component. This is not a hard-and-fast rule but you
  should be aware that the following can make code harder to traverse and also defeat the original
  intention of the <code>Box</code> component.

- Using many of the props available to the `Box` component at once.
- Nesting many instances of the `Box` component to create layout.

If you are finding you are doing these things and it is making your code hard traverse then consider making a new component with the styles applied directly or using the following pattern to abstract the component and give it a name that provides more context:

```jsx
const Wrapper = props => (
  <Box
    $bgColor="white"
    $display="flex"
    $flexDirection="column"
    $position="absolute"
    $top={0}
    $left={0}
    $right={0}
    {...props}
  />
);
```