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.
import type { Theme } from 'theme-ui'export const theme: Theme = {fonts: {body: 'system-ui, sans-serif',heading: '"Avenir Next", sans-serif',monospace: 'Menlo, monospace',},colors: {text: '#000',background: '#fff',primary: '#33e',},}
/** @jsxImportSource theme-ui */import { ThemeUIProvider } from 'theme-ui'import { theme } from './theme'export const App = () => (<ThemeUIProvider theme={theme}><h1sx={{color: 'primary',fontFamily: 'heading',}}>Hello</h1></ThemeUIProvider>)
-
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”
-
“Theme UI is brilliant. Took me a little while to get into it but it’s super brill brills once you get going! 😎”
-
“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 🔥”
-
“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.”