# Box
> Cherry Box component - extends Container with additional visual styling for tiles and card layouts.
Source: https://cherry.al/code/box
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# Box
The Box component is a styled variant of the Container component. It accepts exactly the same props and adds no new ones; the only difference is visual styling: a `theme.colors.light` background, rounded corners from `theme.spacing.radius.lg` (12px by default), and a 1px `theme.colors.grayLight` border. Use it to create visually appealing boxes, tiles, or containers within your applications.
```jsx
import React from "react";
import { Box } from "cherry-styled-components";
export default function Page() {
return Boxing things around!;
}
```
## Properties
Box content.
Additional CSS class for the box.
Makes the box full-width without max-width constraints.
Text alignment within the box.
Base padding value.
Padding at `xs` breakpoint.
Padding at `sm` breakpoint.
Padding at `md` breakpoint.
Padding at `lg` breakpoint.
Padding at `xl` breakpoint.
Padding at `xxl` breakpoint.
Padding at `xxxl` breakpoint.