Skip to content
Theme UI
GitHub

Layouts

By leveraging the variants feature, you can create custom themeable layout components. The components can include some default styles, but still allow users to override styles such as colors or typography, by changing values in the theme object.

To start, create a layout component that will wrap pages in your application. Feel free to customize the content and default styles however you like.

// example src/layout.js
/** @jsxImportSource theme-ui */
export default (props) => (
<div
sx={{
display: 'flex',
flexDirection: 'column',
minHeight: '100vh',
}}>
<header
sx={{
width: '100%',
display: 'flex',
alignItems: 'center',
}}>
Header content
</header>
<main
sx={{
width: '100%',
flex: '1 1 auto',
}}>
<div
sx={{
maxWidth: 768,
mx: 'auto',
px: 3,
}}>
{props.children}
</div>
</main>
<footer
sx={{
width: '100%',
}}>
Footer content
</footer>
</div>
)

Next use the variant property to name parts of the layout.

// example src/layout.js
/** @jsxImportSource theme-ui */
export default (props) => (
<div
sx={{
display: 'flex',
flexDirection: 'column',
minHeight: '100vh',
variant: 'layout.root',
}}>
<header
sx={{
width: '100%',
display: 'flex',
alignItems: 'center',
variant: 'layout.header',
}}>
Header content
</header>
<main
sx={{
width: '100%',
flex: '1 1 auto',
variant: 'layout.main',
}}>
<div
sx={{
maxWidth: 768,
mx: 'auto',
px: 3,
variant: 'layout.container',
}}>
{props.children}
</div>
</main>
<footer
sx={{
width: '100%',
variant: 'layout.footer',
}}>
Footer content
</footer>
</div>
)

The variant properties above will look for styles in theme.layout. If no styles are defined in the theme, the default styles will remain unchanged.

If a user wants to customize the layout styles, they can add overrides to their theme object. For example, the following will add custom colors to the header and footer.

// example user theme
import colors from './colors'
export default {
colors,
layout: {
header: {
color: 'white',
backgroundColor: 'black',
},
footer: {
color: 'white',
backgroundColor: 'black',
},
},
}
Edit the page on GitHub
Previous:
Variants
Next:
Keyframes