Skip to content
Theme UI
GitHub

Getting Started

Install Theme UI and its peer dependencies.

npm i theme-ui @emotion/core @mdx-js/react

Create a theme object to include custom color, typography, and layout values.

// example theme.js
export default {
fonts: {
body: 'system-ui, sans-serif',
heading: '"Avenir Next", sans-serif',
monospace: 'Menlo, monospace',
},
colors: {
text: '#000',
background: '#fff',
primary: '#33e',
},
}

Add the theme to your application with the ThemeProvider, passing in the theme object as a prop.

// basic usage
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from './theme'
export default props => (
<ThemeProvider theme={theme}>{props.children}</ThemeProvider>
)

sx prop

Use the sx prop throughout your application to add styles based on your theme to any component. Enable the sx prop by adding the /** @jsx jsx */ comment to the top of your file and importing jsx from Theme UI.

/** @jsx jsx */
import { jsx } from 'theme-ui'
export default props => (
<div
sx={{
fontWeight: 'bold',
fontSize: 4, // picks up value from `theme.fontSizes[4]`
color: 'primary', // picks up value from `theme.colors.primary`
}}>
Hello
</div>
)

Responsive styles

The sx prop also supports using arrays as values to change properties responsively with a mobile-first approach.

/** @jsx jsx */
import { jsx } from 'theme-ui'
export default props => (
<div
sx={{
// applies width 100% to all viewport widths,
// width 50% above the first breakpoint,
// and 25% above the next breakpoint
width: ['100%', '50%', '25%'],
}}
/>
)
Edit the page on GitHub
Next:
Theming