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.
export default {colors: {text: '#000',background: '#fff',primary: 'tomato',},fonts: {body: 'system-ui, sans-serif',heading: '"Avenir Next", sans-serif',},}
/** @jsxImportSource theme-ui */export default (props) => (<h1sx={{color: 'primary',fontFamily: 'heading',}}>Hello</h1>)
Ergonomic
Best-in-class developer ergonomics let you style your application quickly and consistently based on your themeThemeable
Quickly and easily reference values from your theme throughout your entire application, on any componentConstraint-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.”