Theme UI

The Design Graph Framework

Theme UI is a library for creating themeable user interfaces based on constraint-based design principles. Build custom component libraries, design systems, web applications, Gatsby themes, and more with a flexible API for best-in-class developer ergonomics.

stable docs: https://theme-ui.com
develop (prerelease) docs: https://dev.theme-ui.com

Built for design systems, white-labels, themes, and other applications where customizing colors, typography, and layout are treated as first-class citizens and based on a standard Theme Specification, Theme UI is intended to work in a variety of applications, libraries, and other UI components. Colors, typography, and layout styles derived from customizable theme-based design scales help you build UI rooted in constraint-based design principles.

The next evolution of Styled System
From the creators of utility-based, atomic CSS methodologies
Theme-based styling with the sx prop
Style MDX content with a simple, expressive API
Works with Typography.js themes
Compatible with virtually any UI component library
Works with existing Styled System components
Quick mobile-first responsive styles
Built-in support for dark modes
Primitive page layout components
Plugin for use in Gatsby sites and themes
Completely customizable with robust theming
Built with a standard Theme Specification for interoperability
Built with Emotion for scoped styles

Getting Started

npm install theme-ui

Any styles in your app can reference values from the global theme object. To provide the theme in context, wrap your application with the ThemeProvider component and pass in a custom theme object.

// basic usage
import { ThemeProvider } from 'theme-ui'
import theme from './theme'

export default (props) => (
  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
)

The theme object follows the System UI Theme Specification, which lets you define custom color palettes, typographic scales, fonts, and more. Read more about theming.

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

`sx` prop

The sx prop works similarly to Emotion's css prop, accepting style objects to add CSS directly to an element in JSX, but includes extra theme-aware functionality. Using the sx prop for styles means that certain properties can reference values defined in your theme object. This is intended to make keeping styles consistent throughout your app the easy thing to do.

The sx prop only works in modules that have defined a custom pragma at the top of the file, which replaces the default React JSX functions. This means you can control which modules in your application opt into this feature without the need for a Babel plugin or additional configuration.

/** @jsxImportSource 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>
)

Read more about how the custom pragma works.

Responsive styles

The sx prop also supports using arrays as values to change properties responsively with a mobile-first approach. This API originated in Styled System and is intended as a terser syntax for applying responsive styles across a singular dimension.

/** @jsxImportSource 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%'],
    }}
  />
)

Documentation

MIT License

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Brent Jackson} 🤔 💻 🎨 📖 💡 ⚠️ 👀	_{Piotr Monwid-Olechnowicz} 💻 📖 ⚠️ 👀	_{Dany Castillo} 💻 📖 💡 ⚠️	_{Jordan Overbye} 💻 💡 ⚠️	_{Lachlan Campbell} 💻 💡 ⚠️ 👀 📖 💬	_{John Otander} 💻 👀 📖 ⚠️ 🤔	_{David Burles} 💻 👀 ⚠️ 📖	_{Max Stoiber} 💻 👀 ⚠️ 💡
_{Atanas Stoyanov} 💻 💬 ⚠️ 🐛 📖	_Lennart 💻 🐛 📖 💡	_{Aleksandra Sikora} 💻	_LB 💻 ⚠️	_{Francis Champagne} 💻 🐛 ⚠️ 📖	_{Alex Page} 💻 📖	_{Adam Schay} 💻	_Alex 💻 📖
_{James Edmonds} 💻 📖	_{Florent SCHILDKNECHT} 💻 📖	_{Cole Bemis} 💻 ⚠️ 📖	_{John Letey} 📖	_{Yuraima Estevez} 💻	_{Allan Pope} 💻 📖	_{Emmanuel Pilande} 💻	_{Justin Hall} 💻
_Marek 💻 🐛	_{Björn Clees} 📖 💻	_{Iurii Kucherov} 📖	_{Joe Strouth} 💻 🐛	_{Stewart Everett} 💻	_{Travis Arnold} 💻 📖	_{Ivo Reis} 💻	_{Benedikt Rötsch} 🐛 📖
_{Jacob Cofman} 📖	_{John Letey} 📖	_{Lawrence Gosset} 📖	_{Markos Konstantopoulos} 📖	_{Robin Millette} 💻	_{Rodney Folz} 💻	_{Rodrigo Pombo} 💻 ⚠️ 📖	_{Scott Silvi} 📖
_{Shawn Allen} 📖	_{Tomas Carnecky} 💻 🐛	_{John Polacek} 💻 🐛	_mackie 💻	_{Aaron Adams} 💻 🐛 📖	_Amberley 💻	_{Andreea Năstase} 📖	_{Anson Low Z.F} 🐛 📖
_{Bernhard Gschwantner} 💻	_{Bhanu Prakash Korthiwada} 📖	_{Bruno Lemos} 📖	_{Bryce Fischer} 💻	_{Dan Wood} 📖	_Debs 📖	_{Edward O'Reilly} 💻 🐛	_{Eric Schaefer} 💻
_{Felix Green} 📖	_{Gerhard Bliedung} 💻 🐛	_{Guayo Mena} 💡	_{Guilherme Lima} 📖	_{Herb Caudill} 📖	_{Jacob Bolda} 💻 🐛	_{Jason Lengstorf} 🐛 📖	_{Jason Rundell (he/him)} 💡
_{Joe Race} 📖	_{Kanstantsin Klimashevich} 📖	_Eka 📖 🐛	_{Keir Williams} 📖	_{Kristóf Poduszló} 💻 🐛 🤔	_{Kyle Gill} 📖	_{Kyle Holmberg} 📖	_{Jay Laiche} 💻
_{Marc Wiest} 💻	_{Matheus Teixeira} 💻	_{matt-cratebind} 📖	_{Matt Zabriskie} 💻	_{Maxime Khoy} 💻	_{Michael Friedman} 📖	_{Michael Zetterberg fd. Lopez} 💻	_{Nathan Knowler} 💻
_{Neeraj Lagwankar} 📖	_{Owen Young} 💻	_{Patrick Arminio} 💻 🐛	_{Pedro Duarte} 💻	_{Ray Clanan} 💻	_{Rich Werden} 📖	_{Rob Phoenix} 📖 🐛	_{Robert Moggach} 💻 🐛
_{Anand Narayan} 💻 🐛	_{Sam Poder} 📖	_{Sam Rose} 📖	_Sohrab 💻	_{Spencer Rinehart} 💻	_Steve 📖	_{Steve Barton} 📖	_{Tim Reynolds} 💻 🐛
_{Vinícius Lemes} 📖	_{Yihwan Kim} 💻 🐛	_{Yuriy Burychka} 📖	_Zolwiastyl 💻	_{Amrish Kushwaha} 💻	_{Joe Bell} 💻 🐛	_{kenny-loveholidays} 💻	_{⦇⦀∙ˇ∎ˇ∙⦀⦈} 💻 🐛
_navsgh 📖	_{Shane O'Neill} 📖	_汪磊 💻 🐛	_{Carolin Maisenbacher} 💻 📖 ⚠️	_{Alex Chan} 📖 💡 ⚠️ 💻	_Kenny 💻	_{Jordie Bodlay} 📖