## Box  
Base component for all Mantine components  
Category: Miscellaneous  

### Usage

The `Box` component serves as a  base for all other components and can be used as a replacement for `html.Div` as a basic container.

The key advantage of using `Box` is its support for [Style Props](/style-props), allowing for cleaner, more readable styling directly within the component.

### Example
Both examples below produce the same result:

```python
# Using html.Div
html.Div(
    [
        # your content here
    ],
    style={"marginTop": 8, "padding": 24}
)

# Using dmc.Box with Style Props
dmc.Box(
    [
        # your content here
    ],
    mt=8, p=24
)

```

> Please see the [Style Props](/style-props) section for more information.




### Keyword Arguments
#### Box

- children (a list of or a singular dash component, string or number; optional)

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- className (string; optional):
    Class added to the root element, if applicable.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- tabIndex (number; optional):
    tab-index.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.