Skip to main content

Box

Box is a fundamental layout component that serves as a building block for other components. It supports all styled-system properties and includes additional gradient functionality.

Usage​

<Box 
  p={4} 
  bg="primary"
  borderRadius="md"
>
  Content goes here
</Box>

With Gradient​

<Box 
  gradient={{
    angle: "45deg",
    fromColor: "primary",
    toColor: "secondary",
    fromStop: "0%",
    toStop: "100%"
  }}
>
  Content with gradient background
</Box>

Props​

Box accepts all styled-system props from the following categories:

Additional Props​

gradient​

Optional gradient configuration object with the following properties:

  • angle: The angle of the gradient (e.g., "45deg", "to right")
  • fromColor: Starting color of the gradient (references theme colors)
  • fromStop: Starting position of the gradient (e.g., "0%")
  • toColor: Ending color of the gradient (references theme colors)
  • toStop: Ending position of the gradient (e.g., "100%")