Theme UI

Theme UI is a React library for building themeable interfaces around a standard Theme Specification, letting design tokens (colors, typography, spacing) drive component styling through an sx prop built on Emotion. It’s the design-system successor to Styled System, adding a ThemeProvider, ready-made presets (Tailwind-, Bootstrap-, and Bulma-inspired themes), dark-mode color modes, and MDX styling support out of the box.

The monorepo bundles the core theme-ui package alongside companion packages — @theme-ui/color, @theme-ui/components, @theme-ui/core — plus a Gatsby plugin and multiple design-system presets, all versioned together and consumed most commonly through the top-level theme-ui package.

What You Get

• The sx prop for theme-aware inline styling on any component, powered by @theme-ui/core and Emotion
• ThemeProvider and a standard Theme Specification for defining colors, typography, and layout scales once and reusing them across components
• Built-in dark mode / color-mode switching via @theme-ui/color
• A component library (@theme-ui/components) of common UI primitives styled through the theme
• Ready-made design presets (Tailwind-, Bootstrap-, Bulma-, sketchy-, and deep-inspired themes) and a Gatsby plugin for MDX-driven sites

Common Use Cases

• Building a custom design system with centralized, swappable theme tokens instead of hard-coded styles
• Adding dark mode / multiple color-mode support to a React application
• Styling MDX-authored content (blogs, docs sites) with theme-driven typography and layout
• Prototyping quickly with an existing preset (Tailwind, Bootstrap, Bulma) before authoring a custom theme
• Migrating a Styled System-based component library to a more structured theme specification

Under The Hood

Architecture - Theme UI is a Lerna/Yarn-workspaces monorepo under packages/, with @theme-ui/core implementing the theme-aware style resolution (parseProps, JSX namespace typing) that the top-level theme-ui package re-exports alongside @theme-ui/color (color-mode logic) and @theme-ui/components; separate preset packages (preset-tailwind, preset-bootstrap, preset-bulma, etc.) each export a ready-made theme object conforming to the shared Theme Specification, and a gatsby-plugin-theme-ui wires the theme into Gatsby’s shadowing system. Tech Stack - TypeScript throughout, built on Emotion for CSS-in-JS style injection, with Rollup-based package builds (dual CJS/ESM output visible in theme-ui’s exports map) and a docs/examples set covering Next.js and Gatsby integration. Code Quality - The core theme-ui package itself carries no dedicated test files (tests live in packages/test-utils and other package-level test suites instead), and GitHub activity has slowed to moderate levels versus its earlier growth phase, though the 5.4k-star, 661-fork repo remains a widely depended-on design-system foundation. API Design - The sx prop pattern (<Box sx={{ color: 'primary', p: 3 }} />) maps directly onto theme scale keys, so consumers already familiar with Styled System or Tailwind’s utility mental model pick it up quickly; the tradeoff is the large surface of companion packages and presets, which means understanding which of several @theme-ui/* packages to reach for takes more upfront orientation than a single-package styling library.