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 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
sx={{
flexWrap: 'wrap',
}}
>
<Box sx={{ width: ['100%', '50%'] }} />
<Box sx={{ width: ['100%', '50%'] }} />
</Flex>
)

Layout Theming

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

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

The styles for the layout components can reference colors and other values from the theme. This can be used to style specific properties, like colors, from the global theme.

theme: {
colors: {
header: {
text: '#fff',
background: '#000',
},
},
styles: {
Header: {
// references values in `theme.colors`
color: 'header.text',
bg: 'header.background',
},
},
}
Edit the page on GitHub