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.
Home page
Docs
https://theme-ui.com/getting-started
Github
https://github.com/system-ui/theme-ui
Demo
Syntax
// 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',
},
}
// basic usage
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from './theme'
export default props => (
<ThemeProvider theme={theme}>{props.children}</ThemeProvider>
)
/** @jsx jsx */
import { jsx } from '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>
)
