> For the complete documentation index, see [llms.txt](https://redd.gitbook.io/atomic-layout/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://redd.gitbook.io/atomic-layout/api/components/box.md).

# Box

## Specification

Box is a primitive component that distributes alignment and spacing.

{% hint style="warning" %}
Box has no control over elements' composition. **Use** [**Composition**](/atomic-layout/api/components/composition.md) **instead**.
{% endhint %}

## Props

Box supports all [Prop aliases](/atomic-layout/fundamentals/prop-aliases.md), *except* those specific to CSS Grid.

| Prop name | Type      | Description              |
| --------- | --------- | ------------------------ |
| `flex`    | `boolean` | Display a box as `flex`. |
| `inline`  | `boolean` | Uses inline display.     |

## Example

{% code title="" %}

```jsx
import React from 'react'
import { Box } from 'atomic-layout'

export const Header = ({ children }) => (
  <Box as="header" padding={10} paddingMd={20}>
    {children}
  </Box>
)
```

{% endcode %}