src="/packages/docs/static/logo-dark.png#gh-dark-mode-only"
width="96"
height="96"
alt="Theme UI logo"
/>
src="/packages/docs/static/logo.png#gh-light-mode-only"
width="96"
height="96"
alt="Theme UI logo"
/>

Theme UI

The Design Graph Framework

src="https://badgen.net/bundlephobia/minzip/theme-ui"
alt="Size"
/>


src="https://badgen.net/bundlephobia/tree-shaking/theme-ui"
alt="Tree Shaking"
/>


src="https://badgen.net/badge/license/MIT/blue"
alt="MIT license"
/>

\
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

[stable]: https://github.com/system-ui/theme-ui/tree/stable
[develop]: https://github.com/system-ui/theme-ui/tree/develop

---

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
- 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
- Completely customizable with robust theming
- Built with a standard [Theme Specification][] for interoperability
- Built with [Emotion][] for scoped styles
- Plugin for use in [Gatsby][] sites and themes
- Style [MDX][] content with a simple, expressive API
- Works with [Typography.js][] themes

[emotion]: https://emotion.sh
[mdx]: https://mdxjs.com
[styled system]: https://styled-system.com
[gatsby]: https://gatsbyjs.org
[theme specification]: https://system-ui.com/theme
[typography.js]: https://github.com/KyleAMathews/typography.js

Getting Started

``sh
npm install theme-ui @emotion/react
`

_If you don't need color modes or components you can install
@theme-ui/core_.

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

`jsx
// basic usage
import { ThemeUIProvider } from 'theme-ui'
import theme from './theme'

export default (props) => (
{props.children}
)
`

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.

`js
// 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.

`jsx
/* @jsxImportSource theme-ui /

export default (props) => (
sx={{
fontWeight: 'bold',
fontSize: 4, // picks up value from theme.fontSizes[4]
color: 'primary', // picks up value from theme.colors.primary
}}
>
Hello