Build consistent, themeable React apps based on constraint-based design principles | Built with Emotion + Styled System + MDX + Typography.js
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
- 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
npm install theme-ui
Any styles in your app can reference values from the global
To provide the theme in context,
wrap your application with the
ThemeProvider component and pass in a custom
// basic usageimport React from 'react'import ThemeProvider from 'theme-ui'import theme from './theme'<ThemeProvider =>propschildren</ThemeProvider>
// example theme.jsfonts: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 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.
sx prop for styles means that certain properties can reference values defined in your
This is intended to make keeping styles consistent throughout your app the easy thing to do.
sx prop only works in modules that have defined a custom pragma at the top of the file, which replaces the default
This means you can control which modules in your application opt into this feature without the need for a Babel plugin or additional configuration.
/** @jsx jsx */import jsx from 'theme-ui'<div=>Hello</div>
Read more about how the custom pragma works.
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.
/** @jsx jsx */import jsx from 'theme-ui'<div=/>