---
title: 'Box'
github: 'https://github.com/blockstack/ux/tree/master/packages/ui/src/box'
---

# Box

Box is the base primitive component on top of which all other components
are built. By default, it renders a `div` element. When building any new
layout elements or components, you'll almost always go for a `Box` to
start with. There are some other components that are in the same
category of "primitives": `Flex`, `Grid`, `Text`.

## Import

```js
import { Box } from '@blockstack/ui';
```

## Usage

```jsx
<Box w="100%" p={space('base')} color="white" bg="salmon">
  Box is the base element all others are created from.{' '}
  <Box as="span" bg="white" color={themeColor('ink.900')}>
    It can also be inline.
  </Box>
</Box>
```

## as prop

You can use the `as` prop to change which element is rendered. You can pass a string of a dom element, or you can pass another React component.

```jsx
<>
  {/* Box as a button! */}
  <Box as="button" rounded="md" bg="salmon" color="white" px={space('base')} height={12}>
    Button
  </Box>
  {/* Box as Flex for recreating a button */}
  <Box
    rounded="md"
    bg={themeColor('blue')}
    _hover={{
      bg: themeColor('blue.hover'),
      cursor: 'pointer',
    }}
    color="white"
    px={space('base')}
    mt={space('base')}
    height="64px"
    as={Flex}
    alignItems="center"
    justifyContent="center"
  >
    Button
  </Box>
</>
```
