Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@theme-ui/core

system-ui280.7kMIT0.17.2TypeScript support: included

Minified Size on Bundlephobia

readme

@theme-ui/core

Minified Size on Bundlephobia

@theme-ui/core provides minimal React support for lightweight usage.

npm i @theme-ui/core @emotion/react

Usage

/** @jsxImportSource @theme-ui/core */

import { ThemeProvider } from '@theme-ui/core'

export function App() {
  return (
    <ThemeProvider theme={{ colors: { primary: '#33e' } }}>
      <h1 sx={{ color: 'primary' }}>Hello</h1>
    </ThemeProvider>
  )
}

If you already use theme-ui package, the batteries-included version of Theme UI, you don't need to install @theme-ui/core separately — it's already in your node_modules, and theme-ui reexports everything from it.

API

  • jsx — JSX function to create React elements supporting sx prop
  • ThemeProvider — a context provider
  • useThemeUI — a hook to access your theme
  • merge — an utility function to deeply merge themes together

Note that @theme-ui/core doesn’t add global or root styles to <html>/<body>. Refer to the Global Styles docs for how to add global styles.

JSX Runtime

As @theme-ui/core defines jsx function and types for it, you can use it to configure JSX runtime without installing theme-ui package.

Entry point /jsx-runtime

  • jsx
  • jsxs

Entry point /jsx-dev-runtime

  • jsxDEV

changelog

v0.13.0 (Mon Dec 27 2021)

Release Notes

Move Emotion and MDX packages to peerDeps (#1867)

BREAKING CHANGE: @emotion/react and @mdx-js/react were moved to peerDependencies of theme-ui, @theme-ui/mdx and @theme-ui/sidenav and must be installed separately. This is a revert of change from Theme UI v0.3, and it's meant to help solve version clashes and context mismatch bugs on user side. Connected issues: #1793, #1531, #1530, #1388, #1345, #1130.

🚀 Enhancement

🐛 Bug Fix

  • fix: add missing deepmerge dependency (@hasparus)

👨‍💻 Minor changes

  • docs: Write migration notes for v0.13 (@hasparus)

Authors: 1

v0.12.0 (Thu Oct 28 2021)

:tada: This release contains work from a new contributor! :tada:

Thank you, William Pei (@draekien), for all your work!

🚀 Enhancement

🐛 Bug Fix

  • Merge remote-tracking branch 'upstream/develop' into fix/color-scheme-media-query-api-update #981 (@draekien)

Authors: 6

v0.11.0 (Wed Aug 25 2021)

🚀 Enhancement

  • fix(color-modes): combine colors in nested providers #1838 (@hasparus)

🐛 Bug Fix

🏠 Internal

Authors: 1

v0.10.0 (Sat Jun 19 2021)

🏠 Internal

Authors: 2

v0.8.3 (Wed May 05 2021)

⚠️ Pushed to stable

  • Merge branch 'stable' into develop (@hasparus)

Authors: 1

v0.8.1 (Wed May 05 2021)

🐛 Bug Fix

Authors: 2

v0.8.0 (Wed May 05 2021)

:tada: This release contains work from a new contributor! :tada:

Thank you, null@Zolwiastyl, for all your work!

🚀 Enhancement

🐛 Bug Fix

  • Wrap top level ThemeProvider in CacheProvider #1717 (@hasparus @Zolwiastyl)
  • fix(core): add missing dependency @emotion/cache (@hasparus)
  • test(core): use a dumber, but cleaner mock (@hasparus)
  • fix(core): wrap top level ThemePovider with CacheProvider from Emotion (@Zolwiastyl)
  • wip(core): test if ThemeProvider is on top level (@hasparus)
  • Merge remote-tracking branch 'origin/develop' into v0.8 (@hasparus)
  • Merge branch 'stable' into config-2 (@hasparus)
  • Merge branch 'config' into config-2 #1421 (@hasparus)
  • Merge branch 'develop' into config (@lachlanjc)
  • Begin moving theme config options (@lachlanjc)

⚠️ Pushed to stable

  • Merge branch 'stable' into develop (@hasparus)

Authors: 4

v0.7.5 (Wed Apr 28 2021)

⚠️ Pushed to stable

  • Merge branch 'develop' into stable (@hasparus)

Authors: 1

v0.7.0 (Thu Apr 15 2021)

🚀 Enhancement

🐛 Bug Fix

⚠️ Pushed to stable

  • Merge branch 'develop' into stable (@hasparus)

Authors: 2