Skip to content
Theme UI
GitHub

Theme UI

Build consistent, themeable React apps based on constraint-based design principles

Emotion + Styled System + MDX + Typography.js

Documentation GitHub

Build Status Version MIT License system-ui/theme badge bundle size badge

  1. Create your theme

    export default {
    colors: {
    text: '#000',
    background: '#fff',
    primary: 'tomato',
    },
    fonts: {
    body: 'system-ui, sans-serif',
    heading: '"Avenir Next", sans-serif',
    },
    }
  2. Style your UI

    /** @jsx jsx */
    import { jsx } from 'theme-ui'
    export default props => (
    <h1
    sx={{
    color: 'primary',
    fontFamily: 'heading',
    }}>
    Hello
    </h1>
    )
  • Ergonomic

    Best-in-class developer ergonomics let you style your application quickly and consistently based on your theme
  • Themeable

    Quickly and easily reference values from your theme throughout your entire application, on any component
  • Constraint-based

    Use color, typography, and layout scales rooted in constraint-based design principles
  • “Looking into Theme UI and WHOA 🤯 it's everything I like from styled-system, leveraged into a less opinionated usage.”

    Eka

  • “Feels like web development using cheat codes”

    Richard George

  • “Theme UI is brilliant. Took me a little while to get into it but it’s super brill brills once you get going! 😎”

    Paul Scanlon

  • “Took me approximately 5 minutes to fall in love with Theme UI, its sx prop gives you access to design tokens from a theme file automatically as well as the goodness of the css prop 🔥”

    Kyle Gill

  • “Theme UI is absolutely brilliant. Things I was struggling with in styled-system (like mixing responsive and css props) are solved very elegantly + so much more.”

    Bernhard Gschwantner