Container
The Container component provides features such as fluid width, text alignment, and padding adjustments based on screen size. Use it to create responsive layouts as a wrapper for other components and content.
import React from "react";
import { Container } from "cherry-styled-components";
export default function Page() {
return (
<Container $textAlign="center">
Your content goes here!
</Container>
);
}Properties
childrenReact.ReactNode
Container content.
$fluidboolean
Makes the container full-width without max-width constraints.
$textAlign"right" | "left" | "center"
Text alignment within the container.
$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.