Skip to content
Theme UI

Getting Started

Install Theme UI.

npm i theme-ui

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 => (
fontWeight: 'bold',
fontSize: 4, // picks up value from `theme.fontSizes[4]`
color: 'primary', // picks up value from `theme.colors.primary`

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 => (
// 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