# system-ui/theme-ui

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

Repository: https://github.com/system-ui/theme-ui
Canonical: https://ross.abutalabs.com/products/theme-ui
Homepage: https://theme-ui.com
Language: TypeScript
License: MIT
License Family: permissive
Topics: style, theme, design-system, design, design-tokens, ui, color, typography, layout, react, emotion, mdx
Last push: 2026-06-14T11:55:43+00:00

## Health v2 (maintenance only)
Score: 77/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 87, release rhythm 52, longevity 100
- inputs: {"age_days": 2709, "days_push": 80, "days_rel": 243, "gap_med": 59.0, "n_releases_24m": 5}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 5397, forks 659 (observed 2026-08-28T04:09:17.344535+00:00)

## What it is
Theme UI is a React library for building themeable user interfaces based on constraint-based design principles. It provides an sx prop and theme object so styles reference design tokens for color, typography, and layout consistently across apps and design systems.

## Use cases
- build a design system in react
- theme react components with design tokens
- add consistent styling with an sx prop
- implement dark mode / color modes in react
- style gatsby sites with mdx
- create a custom component library with consistent typography and colors

## When to choose
- you want constraint-based, token-driven styling in React
- you need built-in theming and color mode switching
- you use Gatsby or MDX and want integrated styling
- you prefer CSS-in-JS with Emotion

## When to avoid
- you use a framework other than React
- you want utility-class CSS like Tailwind instead of CSS-in-JS
- you need zero runtime styles or server-only CSS extraction
- your team prefers plain CSS or CSS Modules

## Facets
- artifact type: library
- maturity: active
- function: ui-components, css-framework, theme, frontend-framework
- domain: web-development, frontend, web-design, developer-tools
- platform: cross-platform
- tags: design-system, design-tokens, react, emotion, mdx, sx-prop, color-modes, theming, nodejs, web-server

## Member repositories
- system-ui/theme-ui (main) score 77

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:09:17.344535+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T17:58:22.378806+00:00, confidence not recorded.
  - readme: https://github.com/system-ui/theme-ui (fetched 2026-08-28T04:09:17.344535+00:00, sha 4210dd437e2b)
  - homepage: https://theme-ui.com (fetched 2026-08-29T08:52:53.654937+00:00, sha 43a4011ad035)
  - site_page: https://theme-ui.com/getting-started (fetched 2026-08-29T08:52:53.664342+00:00, sha 7358d7db66e0)
- Data as of 2026-08-30T08:39:29.467469+00:00.