Skip to content
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
Cannot retrieve contributors at this time


Minified Size on Bundlephobia

@theme-ui/css contains the framework-agnostic core logic of Theme UI. It lets you write style objects with responsive, theme-aware ergonomic shortcuts.

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


import { css as transformStyleObject } from '@theme-ui/css'
import { css as createClassName } from '@emotion/css'

const root = document.getElementById('root')

/** @type {import("@theme-ui/css").Theme} */
const theme = {
  colors: {
    text: '#222',
  fonts: {
    mono: 'monospace',
  space: {
    sm: '1rem',
    md: '2rem',

const styles = transformStyleObject({
  padding: ['sm', 'md'],
  border: ({ colors }) => `2px solid ${colors.text}`,
  h1: {
    fontFamily: 'mono',
    color: 'text',

root.innerHTML = `
<h1>You can use <code>@theme-ui/css</code> in Vanilla JS!</h1>

See the snippet above on CodeSandbox