[go: up one dir, main page]
Skip to content
Theme UI
GitHub
UI

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.

Documentation GitHub

GitHubGitHub Starsnpm (latest)npm (develop)ContributorsSizeTree ShakingMIT licenseJoin our Discord communityThis project is using Cypress for end-to-end tests.This project is using Percy.io for visual regression testing.

  1. Create your theme

import type { Theme } from 'theme-ui'


export const theme: Theme = {
  fonts: {
    body: 'system-ui, sans-serif',
    heading: '"Avenir Next", sans-serif',
    monospace: 'Menlo, monospace',
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
  },
}

  1. Style your UI

/** @jsxImportSource theme-ui */
import { ThemeUIProvider } from 'theme-ui'
import { theme } from './theme'


export const App = () => (
  <ThemeUIProvider theme={theme}>
    <h1
      sx={{
        color: 'primary',
        fontFamily: 'heading',
      }}
    >
      Hello
    </h1>
  </ThemeUIProvider>
)

  • Ergonomic

    Best-in-class developer ergonomics let you style your application quickly and consistently based on your theme

  • Themeable

    Quickly and easily reference values from your theme throughout your entire application, on any component

  • Constraint-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”

    – Richard George

  • “Theme UI is brilliant. Took me a little while to get into it but it’s super brill brills once you get going! 😎”

    – Paul Scanlon

  • “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 🔥”

    – Kyle Gill

  • “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.”

    – Bernhard Gschwantner

Get Started

Explore the Docs