@theme-ui/core

[![Minified Size on Bundlephobia](https://badgen.net/bundlephobia/minzip/@theme-ui/core)](https://bundlephobia.com/package/@theme-ui/core)

0.16.1
Source
npm

Version published: last year

Maintainers: 4

Created: 5 years ago

Source

@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 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

FAQs

What is @theme-ui/core?

Is @theme-ui/core well maintained?

Package last updated on 14 Aug 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install