The Container component accepts various props for customization. It provides features such as fluid width, text alignment, and padding adjustments based on screen size. You can use it to create responsive layouts in your applications. It is a wrapper component that can be used to wrap other components and content, maybe with an expetion of elements that go full width.
import React from "react";
import { Container } from "cherry-styled-components";
export default function Page() {
return (
<Container $textAlign="center">
Your content goes here!
</Container>
)
}
Your content goes here!
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: