Skip to main content
The Box component is the foundational layout primitive in Theme UI. It provides access to spacing utilities, colors, and the sx prop for theme-aware styling.

​
Import

import { Box } from 'theme-ui'

​
Usage

<Box
  sx={{
    padding: 3,
    backgroundColor: 'primary',
    borderRadius: 4,
  }}
>
  Content
</Box>

​
Props

The Box component accepts all standard HTML div attributes plus the following:
​
as
React.ElementType
Render the component as a different HTML element or React component. Defaults to 'div'.
<Box as="section">Section content</Box>
​
sx
ThemeUIStyleObject
Theme-aware style object for applying CSS with access to theme values.
<Box sx={{ color: 'primary', fontSize: [2, 3, 4] }}>
  Responsive text
</Box>
​
variant
string
Apply a variant style from theme.variants. Use dot notation to access nested variants.
<Box variant="card">Card style</Box>
<Box variant="buttons.primary">Button style</Box>

​
Spacing Props

Box includes shorthand props for margin and padding that map to theme space values:
​
m | margin
ResponsiveValue<string | number>
Margin on all sides.
​
mt | marginTop
ResponsiveValue<string | number>
Margin top.
​
mr | marginRight
ResponsiveValue<string | number>
Margin right.
​
mb | marginBottom
ResponsiveValue<string | number>
Margin bottom.
​
ml | marginLeft
ResponsiveValue<string | number>
Margin left.
​
mx | marginX
ResponsiveValue<string | number>
Margin left and right.
​
my | marginY
ResponsiveValue<string | number>
Margin top and bottom.
​
p | padding
ResponsiveValue<string | number>
Padding on all sides.
​
pt | paddingTop
ResponsiveValue<string | number>
Padding top.
​
pr | paddingRight
ResponsiveValue<string | number>
Padding right.
​
pb | paddingBottom
ResponsiveValue<string | number>
Padding bottom.
​
pl | paddingLeft
ResponsiveValue<string | number>
Padding left.
​
px | paddingX
ResponsiveValue<string | number>
Padding left and right.
​
py | paddingY
ResponsiveValue<string | number>
Padding top and bottom.

​
Color Props

​
color
ResponsiveValue<string>
Text color from theme.colors.
​
bg | backgroundColor
ResponsiveValue<string>
Background color from theme.colors.
​
opacity
ResponsiveValue<number>
CSS opacity value.

​
Examples

​
Responsive Spacing

<Box p={[2, 3, 4]} mx="auto">
  Padding increases with viewport size
</Box>

​
Color and Background

<Box color="white" bg="primary" p={3}>
  Themed colors
</Box>

​
Custom Element

<Box as="article" sx={{ maxWidth: 768 }}>
  Article content
</Box>

Build docs developers (and LLMs) love

Get started for freeTalk to us