Box is the most abstract component on top of which most other primitive
components are built. By default it renders a
The Box component is useful for a variety of cases:
- Create responsive layouts
- Implement basic styles within the constraints of the theme
- Compose new components and support overriding the underlying element using the
The padding keys allow targeting each side as well as the x-axis and y-axis.
paddingXpadding-left and padding-right
paddingYpadding-top and padding-bottom
The margin keys allow targeting each side as well as the x-axis and y-axis.
marginXmargin-left and margin-right
marginYmargin-top and margin-bottom
The rounding keys allow targeting each box side.
roundingBottomborder-bottom-left-radius and border-bottom-right-radius
roundingLeftborder-bottom-left-radius and border-top-left-radius
roundingRightborder-bottom-right-radius and border-top-right-radius
roundingTopborder-bottom-left-radius and border-bottom-right-radius
The rounding values don't follow the traditional t-shirt sizes.
Align the text within a box:
textAligntext-align CSS property
The available values match the CSS property:
Set the height of a box:
heightheight CSS property
Set the width of a box:
widthwidth CSS property
Mix and match style properties to achieve the desired aesthetic.
Instead of manually managing media queries and adding nested style objects throughout a code base, we offer a convenient shorthand syntax for adding responsive styles with a mobile-first approach.
Each of the above style props accepts a value or array of values. To skip
certain breakpoints, you can pass
null to any position in the array to avoid
generating unnecessary CSS.
While this approach has been widely adopted with great success, much like any new idea, it can seem odd or off-putting at first. We recommend giving it a chance.