Skip to content
Theme UI
GitHub

Layout Components

Theme UI includes several components for creating page layouts.

import {
  Layout,
  Header,
  Main,
  Container,
  Footer
} from 'theme-ui'
// example composition
<Layout>
  <Header />
  <Main>
    <Sidebar />
    <Container>
      {props.children}
    </Container>
  </Main>
  <Footer />
</Layout>
  • Layout (name TBD) the root styled component for wrapping other layout components
  • Header section for top of the page
  • Main the center of the page
  • Container a max-width, centered area
  • Footer section for the bottom of the page

Box & Flex

The Box & Flex layout components are similar to the ones found in Rebass, but are built with Emotion and @styled-system/css.

import React from 'react'
import { Flex, Box } from 'theme-ui'

export default props =>
  <Flex flexWrap='wrap'>
    <Box width={[ 1, 1/2 ]} />
    <Box width={[ 1, 1/2 ]} />
  </Flex>

Layout Theming

These page layout components can be styled with the theme.styles object, similar to how other MDX components.

theme: {
  styles: {
    Header: {
      color: 'white',
      bg: 'black',
    }
  }
}

The styles for the layout components can reference colors and other theme values using @styled-system/css. This can be used to theme specific aspects like colors independent from the component.

theme: {
  colors: {
    header: {
      text: '#fff',
      background: '#000',
    },
  },
  styles: {
    Header: {
      // references values in `theme.colors`
      color: 'header.text',
      bg: 'header.background',
    },
  },
}
Theming
Color Modes