Box - Theme UI

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:

React.ElementType

Render the component as a different HTML element or React component. Defaults to 'div'.

<Box as="section">Section content</Box>

ThemeUIStyleObject

Theme-aware style object for applying CSS with access to theme values.

<Box sx={{ color: 'primary', fontSize: [2, 3, 4] }}>
  Responsive text
</Box>

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:

ResponsiveValue<string | number>

Margin on all sides.

ResponsiveValue<string | number>

Margin top.

ResponsiveValue<string | number>

Margin right.

ResponsiveValue<string | number>

Margin bottom.

ResponsiveValue<string | number>

Margin left.

ResponsiveValue<string | number>

Margin left and right.

ResponsiveValue<string | number>

Margin top and bottom.

ResponsiveValue<string | number>

Padding on all sides.

ResponsiveValue<string | number>

Padding top.

ResponsiveValue<string | number>

Padding right.

ResponsiveValue<string | number>

Padding bottom.

ResponsiveValue<string | number>

Padding left.

ResponsiveValue<string | number>

Padding left and right.

ResponsiveValue<string | number>

Padding top and bottom.

Color Props

ResponsiveValue<string>

Text color from theme.colors.

ResponsiveValue<string>

Background color from theme.colors.

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>

⌘I