Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/system-ui/theme-ui

Build consistent, themeable React apps based on constraint-based design principles
https://github.com/system-ui/theme-ui

color design design-system design-tokens emotion layout mdx react style theme typography ui

Last synced: 5 days ago
JSON representation

Build consistent, themeable React apps based on constraint-based design principles

Host: GitHub
URL: https://github.com/system-ui/theme-ui
Owner: system-ui
License: mit
Created: 2019-04-03T22:10:49.000Z (almost 6 years ago)
Default Branch: develop
Last Pushed: 2024-10-24T10:59:36.000Z (3 months ago)
Last Synced: 2024-10-29T10:42:21.846Z (2 months ago)
Topics: color, design, design-system, design-tokens, emotion, layout, mdx, react, style, theme, typography, ui
Language: TypeScript
Homepage: https://theme-ui.com
Size: 28.1 MB
Stars: 5,294
Watchers: 42
Forks: 672
Open Issues: 63
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

awesome - theme-ui - Build consistent, themeable React apps based on constraint-based design principles (JavaScript)
react-cheatsheet - Theme UI
awesome-list - theme-ui - based design principles | system-ui | 3897 | (TypeScript)
best-of-react - GitHub - 9% open · ⏱️ 10.04.2024): (UI Frameworks & Libraries)

README

        


  

  



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.

**[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**](https://github.com/system-ui/theme-ui/tree/develop/packages/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](https://theme-ui.com/theme-spec/), which lets you define

custom color palettes, typographic scales, fonts, and more. Read more about

[theming](https://theme-ui.com/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) => (

  


    Hello

  

)

```

Read more about

[how the custom pragma works](https://theme-ui.com/guides/how-it-works/#jsx-pragma).

## Responsive styles

The `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](https://styled-system.com/guides/array-props)

across a singular dimension.

```jsx

/** @jsxImportSource theme-ui */

export default (props) => (

  


)

```

---

## Documentation

- [Theming](https://theme-ui.com/theming)

- [The `sx` Prop](https://theme-ui.com/sx-prop)

- [Layout](https://theme-ui.com/layout)

- [Color Modes](https://theme-ui.com/color-modes)

- [Theme Spec](https://theme-ui.com/theme-spec)

- [Themed](https://theme-ui.com/themed)

- [MDX Components](https://theme-ui.com/mdx-components)

- [Gatsby Plugin](https://theme-ui.com/packages/gatsby-plugin)

- [API](https://theme-ui.com/api)

MIT License

## Contributors ✨

Thanks goes to these wonderful people

([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
_{Brent Jackson}
🤔 💻 🎨 📖 💡 ⚠️ 👀

    
_{Piotr Monwid-Olechnowicz}
💻 📖 ⚠️ 👀 💡

    
_{Dany Castillo}
💻 📖 💡 ⚠️

    
_{Jordan Overbye}
💻 💡 ⚠️

    
_{Lachlan Campbell}
💻 💡 ⚠️ 👀 📖 💬

    
_{John Otander}
💻 👀 📖 ⚠️ 🤔

    
_{David Burles}
💻 👀 ⚠️ 📖

    
_{Max Stoiber}
💻 👀 ⚠️ 💡

  

  

    
_{Atanas Stoyanov}
💻 💬 ⚠️ 🐛 📖

    
_Lennart
💻 🐛 📖 💡

    
_{Aleksandra Sikora}
💻

    
_LB
💻 ⚠️

    
_{Francis Champagne}
💻 🐛 ⚠️ 📖

    
_{Alex Page}
💻 📖

    
_{Adam Schay}
💻

    
_Alex
💻 📖

  

  

    
_{James Edmonds}
💻 📖

    
_{Florent SCHILDKNECHT}
💻 📖

    
_{Cole Bemis}
💻 ⚠️ 📖

    
_{John Letey}
📖

    
_{Yuraima Estevez}
💻

    
_{Allan Pope}
💻 📖

    
_{Emmanuel Pilande}
💻

    
_{Justin Hall}
💻

  

  

    
_Marek
💻 🐛

    
_{Björn Clees}
📖 💻

    
_{Iurii Kucherov}
📖

    
_{Joe Strouth}
💻 🐛

    
_{Stewart Everett}
💻

    
_{Travis Arnold}
💻 📖

    
_{Ivo Reis}
💻

    
_{Benedikt Rötsch}
🐛 📖

  

  

    
_{Jacob Cofman}
📖

    
_{John Letey}
📖

    
_{Lawrence Gosset}
📖

    
_{Markos Konstantopoulos}
📖

    
_{Robin Millette}
💻

    
_{Rodney Folz}
💻

    
_{Rodrigo Pombo}
💻 ⚠️ 📖

    
_{Scott Silvi}
📖

  

  

    
_{Shawn Allen}
📖

    
_{Tomas Carnecky}
💻 🐛

    
_{John Polacek}
💻 🐛

    
_mackie
💻

    
_{Aaron Adams}
💻 🐛 📖

    
_Amberley
💻

    
_{Andreea Năstase}
📖

    
_{Anson Low Z.F}
🐛 📖

  

  

    
_{Bernhard Gschwantner}
💻

    
_{Bhanu Prakash Korthiwada}
📖

    
_{Bruno Lemos}
📖

    
_{Bryce Fischer}
💻

    
_{Dan Wood}
📖

    
_Debs
📖

    
_{Edward O'Reilly}
💻 🐛

    
_{Eric Schaefer}
💻

  

  

    
_{Felix Green}
📖

    
_{Gerhard Bliedung}
💻 🐛

    
_{Guayo Mena}
💡

    
_{Guilherme Lima}
📖

    
_{Herb Caudill}
📖

    
_{Jacob Bolda}
💻 🐛

    
_{Jason Lengstorf}
🐛 📖

    
_{Jason Rundell (he/him)}
💡

  

  

    
_{Joe Race}
📖

    
_{Kanstantsin Klimashevich}
📖

    
_Eka
📖 🐛

    
_{Keir Williams}
📖

    
_{Kristóf Poduszló}
💻 🐛 🤔

    
_{Kyle Gill}
📖

    
_{Kyle Holmberg}
📖

    
_{Jay Laiche}
💻

  

  

    
_{Marc Wiest}
💻

    
_{Matheus Teixeira}
💻

    
_{matt-cratebind}
📖

    
_{Matt Zabriskie}
💻

    
_{Maxime Khoy}
💻

    
_{Michael Friedman}
📖

    
_{Michael Zetterberg fd. Lopez}
💻

    
_{Nathan Knowler}
💻

  

  

    
_{Neeraj Lagwankar}
📖

    
_{Owen Young}
💻

    
_{Patrick Arminio}
💻 🐛

    
_{Pedro Duarte}
💻

    
_{Ray Clanan}
💻

    
_{Rich Werden}
📖

    
_{Rob Phoenix}
📖 🐛

    
_{Robert Moggach}
💻 🐛

  

  

    
_{Anand Narayan}
💻 🐛

    
_{Sam Poder}
📖

    
_{Sam Rose}
📖

    
_Sohrab
💻

    
_{Spencer Rinehart}
💻

    
_Steve
📖

    
_{Steve Barton}
📖

    
_{Tim Reynolds}
💻 🐛

  

  

    
_{Vinícius Lemes}
📖

    
_{Yihwan Kim}
💻 🐛

    
_{Yuriy Burychka}
📖

    
_Zolwiastyl
💻

    
_{Amrish Kushwaha}
💻

    
_{Joe Bell}
💻 🐛

    
_{kenny-loveholidays}
💻

    
_{⦇⦀∙ˇ∎ˇ∙⦀⦈}
💻 🐛

  

  

    
_navsgh
📖

    
_{Shane O'Neill}
📖

    
_汪磊
💻 🐛

    
_{Carolin Maisenbacher}
💻 📖 ⚠️

    
_{Alex Chan}
📖 💡 ⚠️ 💻

    
_Kenny
💻

    
_{Jordie Bodlay}
📖

    
_{Matt Gleich}
📖

  

  

    
_{William Pei}
📖 💡 💻 ⚠️

    
_{Greg Poole}
📖

    
_Akash
📖 💻

    
_{Cannon Lock}
📖

    
_kamatte
📖 💻

    
_{Simen A. W. Olsen}
📖 💡 ⚠️ 💻

    
_{Wahid Rahim}
📖 💡 💻

    
_{Justin Cooper}
📖

  

  

    
_CJ
📖 💻

  

This project follows the

[all-contributors](https://github.com/all-contributors/all-contributors)

specification. Contributions of any kind welcome!