A fundamental layout component for creating containers with custom styles and responsive behavior.
import { Box } from '@styled-system/jsx'<Box
p={4}
w="full"
maxW="500px"
>
This is a box
</Box>Box accepts all common porperties mentioned in the layout guide.
All properties support responsive values using the following format:
<Box
w={{ base: "100%", md: "50%", lg: "33%" }}
p={{ base: 2, md: 4, lg: 6 }}
>
Responsive Box
</Box>