The MaxWidth component is a container that allows you to set a maximum width for its content. Useful for creating centered layouts with width constraints.
import React from "react";
import { MaxWidth, Box } from "cherry-styled-components";
export default function Page() {
return (
<MaxWidth $size={150}>
<Box>150px</Box>
</MaxWidth>
);
}Content to constrain.
Maximum width in pixels.
Max width at xs breakpoint.
Max width at sm breakpoint.
Max width at md breakpoint.
Max width at lg breakpoint.
Max width at xl breakpoint.
Max width at xxl breakpoint.
Max width at xxxl breakpoint.