> For the complete documentation index, see [llms.txt](https://koii-network.gitbook.io/getting-started/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://koii-network.gitbook.io/getting-started/build-dapps-with-koii/template-library/ui-template-layout/box.md).

# Box

Box is the most abstract component on top of which all other Chakra UI components are built. It renders the `div` element by default.

Here's an example of how to customize the navigation bar:

{% hint style="info" %}
You can find this example code at  

/koii.X/src/components/common/Nav/index.tsx, line 18
{% endhint %}

```tsx
 <Box bg="blue.500" px="4" color="white">
 ... ...
```

In this Box component, it has `bg`, `px`and `color` props, which control the background color, padding, and text color

```tsx
<Box bg="red.500" px="4" color="black">
 ... ...
```

After changing `blue.500` to `red.500`, you will notice the navigation color has changed. The same is true for `color` .

{% hint style="info" %}
You can also use HEX for color selector such as #171753 to choose your favorite color..
{% endhint %}

For more information and properties, check [**https://chakra-ui.com/docs/layout/box**](https://chakra-ui.com/docs/layout/box)