@theme-ui/core
@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 supportingsx
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.
/jsx-runtime
Entry point jsx
jsxs
/jsx-dev-runtime
Entry point jsxDEV