The Box component is a container that extends the functionality of the Container component. It inherits the same props as Container and adds additional styling properties. You can use it to create visually appealing boxes / tiles or containers within your applications. Feel free to customize the it according to your design requirements!
import React from "react";
import { Box } from "cherry-styled-components";
export default function Page() {
return (
<Box>
Boxing things around!
</Box>
)
}
Boxing things around!
| Property | Description |
|---|---|
| children? | React.ReactNode |
| $fluid? | boolean |
| $textAlign? | "right" | "left" | "center" |
| $padding? | number | "none" |
| $xsPadding? | number | "none" |
| $smPadding? | number | "none" |
| $mdPadding? | number | "none" |
| $lgPadding? | number | "none" |
| $xlPadding? | number | "none" |
| $xxlPadding? | number | "none" |
| $xxxlPadding? | number | "none" |
| theme? | Theme |
Explore the source code on GitHub: