Box
The Box component extends the functionality of the Container component. It inherits the same props and adds additional styling properties. Use it to create visually appealing boxes, tiles, or containers within your applications.
import React from "react";
import { Box } from "cherry-styled-components";
export default function Page() {
return (
<Box>
Boxing things around!
</Box>
);
}Properties
childrenReact.ReactNode
Box content.
$fluidboolean
Makes the box full-width without max-width constraints.
$textAlign"right" | "left" | "center"
Text alignment within the box.
$paddingnumber | "none"
Base padding value.
$xsPaddingnumber | "none"
Padding at xs breakpoint.
$smPaddingnumber | "none"
Padding at sm breakpoint.
$mdPaddingnumber | "none"
Padding at md breakpoint.
$lgPaddingnumber | "none"
Padding at lg breakpoint.
$xlPaddingnumber | "none"
Padding at xl breakpoint.
$xxlPaddingnumber | "none"
Padding at xxl breakpoint.
$xxxlPaddingnumber | "none"
Padding at xxxl breakpoint.
themeTheme
Cherry theme object.