---
name: Box
menu: Components
route: /components/box
---

import { Playground, Props } from 'docz'
import Box from './'
import { Callout } from '../../index.components'

# Box

Generic container for handling layout.

## Import
`import { Box } from '@blasterjs/core'`

## Basic Usage
All components in Blaster are built on top of the `<Box>` primitive. Any component in Blaster can use `Box`'s props unless specifically overriden.

The primitive component `<Box>` provides an abstraction on top of the `<div>` element to include reset styles and allows you to specify CSS attributes as props to adjust spacing, display, size, positioning and layout.

<Playground>
    <Box>This is a box</Box>
</Playground>


## Prop styling

<Playground>
    <Box display="flex" justifyContent="space-around">
        <Box>flex 1</Box>
        <Box>flex 2</Box>
    </Box>
</Playground>


<Callout icon="info">
    If you would like to apply color and other stylistic decisions, it is recommended to create a new component extending Box.
</Callout>


### PropTypes
| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| ${display} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${space} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${width} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${maxWidth} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${minWidth} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${height} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${maxHeight} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${minHeight} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${verticalAlign} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${alignItems} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${justifyContent} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${flexWrap} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${flexDirection} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${flex} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${alignContent} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${justifyItems} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${justifySelf} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${alignSelf} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${order} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${flexBasis} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${gridGap} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${gridRowGap} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${gridColumnGap} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${gridColumn} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${gridRow} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${gridArea} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${gridAutoFlow} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${gridAutoRows} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${gridAutoColumns} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${gridTemplateRows} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${gridTemplateColumns} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${gridTemplateAreas} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${overflow} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${position} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${zIndex} | number | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${top} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${right} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${bottom} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${left} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${color} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${background} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${borders} | string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${boxShadow} | number or string | no | | see [styled-system](https://jxnblk.com/styled-system/) |
| ${opacity} | number | no | | see [styled-system](https://jxnblk.com/styled-system/) |