@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

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

Current Tags

• 0.4.0-highlight.0                                ...           highlight (5 years ago)
• 0.3.1                                ...           latest (6 years ago)
• 0.4.0-alpha.3                                ...           next (5 years ago)

6 Versions

• 0.6.0-alpha.8                                ...           4 years ago
• 0.14.5                                ...           3 years ago
• 0.15.0-develop.5                                ...           3 years ago
• 0.4.0-alpha.3                                ...           5 years ago
• 0.3.1                                ...           6 years ago
• 0.4.0-highlight.0                                ...           5 years ago