# 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 lumped into the
category of "primitives": `Flex`, `Grid`, `Text`.

## Import

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

## Usage

```jsx
<Box w="100%" p={4} color="white" bg="salmon">
  Box is the base element all others are created from.{" "}
  <Box as="span" bg="white" color="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="button" rounded="md" bg="salmon" color="white" px={4} h={8}>
    Button
  </Box>
  <Box
    mt={5}
    as={Flex}
    align="center"
    justify="center"
    rounded="md"
    bg="salmon"
    color="white"
    px={4}
    h={8}
  >
    Button
  </Box>
</>
```
