Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/system-ui/theme-ui/llms.txt

Use this file to discover all available pages before exploring further.

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>