# Box
> Box is where it all starts.

## Import

```js
import { Box } from '@gemini-suite/vera-react';
```

## About 📦️

Box is a most universal, smallest building block for layouts.
Its job is to render an individual element on the screen.
By default, it just renders a `div` element.

However it's created using the `styled()` function of `@gemini-suite/vera-react`, so
it has access to special `css` prop that generates class names from style objects.

`css` prop features a superset of CSS, so it's intuitive to pick up and applying styles with it feels similar to how you would define inline styles. The difference is that the underlying [Stitches library](https://stitches.dev/) takes things
to the next-level with a fully-typed API, support for features like tokens, media queries and variants.

Box component quite often comes handy, because it allows you to avoid creating a new styled component when you only need to customize a few CSS properties on the spot.

Utilizing tokens from our theme such as [spacing tokens](/tokens/spacing-and-size) ensures consistency by taking advantage of constraint-based design principles.

<Grid
  columns={{
    '@initial': '1',
    '@mqLargeAndUp': '2'
  }}
  columnGap="spacingL"
>
  <GridItem>
    <Card
      href="https://stitches.dev/"
      title="Learn more about Stitches"
      actionIcon="externalLink"
    />
  </GridItem>
</Grid>

## Example

```jsx
<Box
  marginTop="spacingM"
  padding="spacingL"
  css={{
    backgroundColor: '$backgroundNeutralModerate'
  }}
>
  <Box
    padding="spacingS"
    css={{
      border: '2px solid $borderNeutralModerate',
      backgroundColor: '$backgroundNeutralMinimal'
    }}
  >
    {'Box drives the micro-layout of your content'}
  </Box>
</Box>
```

## as prop

You can use the `as` prop to change the element is rendered. You can pass either a string to change the DOM element type, or a React component type to inherit another component.

```jsx
<Box as="h3" padding="spacingM">
  I am 📦️ disguised as heading
</Box>
```

## Margins & paddings

You can apply margin and padding properties to the **Box** component. Margins and paddings are based on our
[spacing system](/tokens/white-space).

```jsx
<Flex flow="column">
  <Flex display="inline" css={{ backgroundColor: '$colorBlue10' }} gap="none">
    <ExampleBox
      padding="spacingL"
      marginRight="spacingM"
      marginBottom="spacingM"
    >
      {'Box 1'}
    </ExampleBox>
    <ExampleBox
      padding="spacingL"
      marginRight="spacingM"
      marginBottom="spacingM"
    >
      {'Box 2'}
    </ExampleBox>
  </Flex>
  <ExampleBox padding="spacingL" css={{ width: 'fit-content' }}>
    <ExampleBox marginBottom="-spacingM" marginLeft="-spacingS">
      {'Inner box with negative margin'}
    </ExampleBox>
  </ExampleBox>
</Flex>
```

---

## API Reference

| Name            | Type                                                      | Default | Description                                                                                                                                                                                                                                                                                  | Required |
| --------------- | --------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| `as`            | `keyof JSX.IntrinsicElements \| React.ComponentType<any>` | `div`   | Change the component to a different HTML tag or custom component. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.   For more details, read our [Composition](/get-started/composition#polymorphism) guide. |          |
| `css`           | `StitchesCss`                                             |         | Apply styles directly to a component in a similar way how you would define inline styles. Vera uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries or variants.                                                 |          |
| `padding`       | `SpacingToken`                                            |         | Sets `padding` to one of the corresponding [spacing tokens](/tokens/white-space).                                                                                                                                                                                                            |          |
| `paddingX`      | `SpacingToken`                                            |         | Sets `padding-left` and `padding-right` to one of the corresponding [spacing tokens](/tokens/white-space).                                                                                                                                                                                   |          |
| `paddingY`      | `SpacingToken`                                            |         | Sets `padding-top` and `padding-bottom` to one of the corresponding [spacing tokens](/tokens/white-space).                                                                                                                                                                                   |          |
| `paddingBottom` | `SpacingToken`                                            |         | Sets `padding-bottom` to one of the corresponding [spacing tokens](/tokens/white-space).                                                                                                                                                                                                     |          |
| `paddingLeft`   | `SpacingToken`                                            |         | Sets `padding-left` to one of the corresponding [spacing tokens](/tokens/white-space).                                                                                                                                                                                                       |          |
| `paddingRight`  | `SpacingToken`                                            |         | Sets `padding-right` to one of the corresponding [spacing tokens](/tokens/white-space).                                                                                                                                                                                                      |          |
| `paddingTop`    | `SpacingToken`                                            |         | Sets `padding-top` to one of the corresponding [spacing tokens](/tokens/white-space).                                                                                                                                                                                                        |          |
| `margin`        | `SpacingToken`                                            |         | Sets `margin` to one of the corresponding [spacing tokens](/tokens/white-space).                                                                                                                                                                                                             |          |
| `marginX`       | `SpacingToken`                                            |         | Sets `margin-left` and `margin-right` to one of the corresponding [spacing tokens](/tokens/white-space).                                                                                                                                                                                     |          |
| `marginY`       | `SpacingToken`                                            |         | Sets `margin-top` and `margin-bottom` to one of the corresponding [spacing tokens](/tokens/white-space).                                                                                                                                                                                     |          |
| `marginBottom`  | `SpacingToken`                                            |         | Sets `margin-bottom` to one of the corresponding [spacing tokens](/tokens/white-space).                                                                                                                                                                                                      |          |
| `marginLeft`    | `SpacingToken`                                            |         | Sets `margin-left` to one of the corresponding [spacing tokens](/tokens/white-space).                                                                                                                                                                                                        |          |
| `marginRight`   | `SpacingToken`                                            |         | Sets `margin-right` to one of the corresponding [spacing tokens](/tokens/white-space).                                                                                                                                                                                                       |          |
| `marginTop`     | `SpacingToken`                                            |         | Sets `margin-top` to one of the corresponding [spacing tokens](/tokens/white-space).                                                                                                                                                                                                         |          |