@theme-ui/css

@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

Usage

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',
  },
})(theme)

root.classList.add(createClassName(styles))
root.innerHTML = `
<h1>You can use <code>@theme-ui/css</code> in Vanilla JS!</h1>
`

See the snippet above on CodeSandbox

Current Tags

0.16.2-scale-tuples.0 ... canary (3 years ago)
0.17.2-develop.1 ... develop (a year ago)
0.4.0-highlight.0 ... highlight (6 years ago)
0.17.4 ... latest (3 months ago)
0.6.0-alpha.8 ... next (5 years ago)

289 Versions

0.17.4 ... 3 months ago
0.17.2 ... a year ago
0.17.2-develop.1 ... a year ago
0.17.2-develop.0 ... a year ago
0.17.1 ... a year ago
0.17.1-develop.0 ... a year ago
0.17.0 ... a year ago
0.17.0-develop.1 ... a year ago
0.17.0-develop.0 ... a year ago
0.16.2 ... 2 years ago
0.16.2-develop.5 ... 2 years ago
0.16.2-develop.2 ... 2 years ago
0.16.2-develop.1 ... 2 years ago
0.16.2-develop.0 ... 3 years ago
0.16.2-scale-tuples.0 ... 3 years ago
0.16.1 ... 3 years ago
0.16.1-develop.0 ... 3 years ago
0.16.0 ... 3 years ago
0.16.0-develop.4 ... 3 years ago
0.16.0-exports.0 ... 3 years ago
0.15.7 ... 3 years ago
0.15.6-develop.0 ... 3 years ago
0.15.5 ... 3 years ago
0.15.5-develop.2 ... 3 years ago
0.15.5-develop.1 ... 3 years ago
0.15.5-develop.0 ... 3 years ago
0.15.4 ... 3 years ago
0.15.4-develop.0 ... 3 years ago
0.15.3 ... 3 years ago
0.15.3-develop.0 ... 4 years ago
0.15.1 ... 4 years ago
0.15.0 ... 4 years ago
0.15.0-develop.30 ... 4 years ago
0.15.0-develop.29 ... 4 years ago
0.15.0-develop.27 ... 4 years ago
0.15.0-develop.26 ... 4 years ago
0.15.0-develop.22 ... 4 years ago
0.15.0-develop.21 ... 4 years ago
0.15.0-develop.20 ... 4 years ago
0.15.0-develop.19 ... 4 years ago
0.15.0-develop.18 ... 4 years ago
0.15.0-develop.17 ... 4 years ago
0.15.0-develop.16 ... 4 years ago
0.15.0-develop.15 ... 4 years ago
0.15.0-develop.14 ... 4 years ago
0.15.0-develop.13 ... 4 years ago
0.14.7 ... 4 years ago
0.15.0-develop.12 ... 4 years ago
0.15.0-develop.11 ... 4 years ago
0.15.0-develop.10 ... 4 years ago
0.15.0-develop.9 ... 4 years ago
0.15.0-develop.8 ... 4 years ago
0.15.0-develop.7 ... 4 years ago
0.15.0-develop.6 ... 4 years ago
0.14.6 ... 4 years ago
0.15.0-develop.5 ... 4 years ago
0.15.0-develop.4 ... 4 years ago
0.15.0-develop.3 ... 4 years ago
0.15.0-develop.2 ... 4 years ago
0.15.0-develop.1 ... 4 years ago
0.15.0-develop.0 ... 4 years ago
0.14.5 ... 4 years ago
0.14.5-develop.0 ... 4 years ago
0.14.4 ... 4 years ago
0.14.4-develop.1 ... 4 years ago
0.14.4-develop.0 ... 4 years ago
0.14.3 ... 4 years ago
0.14.3-develop.2 ... 4 years ago
0.14.3-develop.1 ... 4 years ago
0.14.3-develop.0 ... 4 years ago
0.14.2 ... 4 years ago
0.14.2-develop.2 ... 4 years ago
0.14.2-develop.1 ... 4 years ago
0.14.2-develop.0 ... 4 years ago
0.14.1 ... 4 years ago
0.14.1-develop.0 ... 4 years ago
0.14.0 ... 4 years ago
0.14.0-develop.25 ... 4 years ago
0.14.0-develop.24 ... 4 years ago
0.14.0-develop.23 ... 4 years ago
0.14.0-develop.22 ... 4 years ago
0.14.0-develop.21 ... 4 years ago
0.14.0-develop.20 ... 4 years ago
0.14.0-develop.19 ... 4 years ago
0.14.0-develop.18 ... 4 years ago
0.14.0-develop.17 ... 4 years ago
0.14.0-develop.16 ... 4 years ago
0.14.0-develop.15 ... 4 years ago
0.14.0-develop.14 ... 4 years ago
0.14.0-develop.13 ... 4 years ago
0.14.0-develop.12 ... 4 years ago
0.14.0-develop.11 ... 4 years ago
0.14.0-develop.10 ... 4 years ago
0.14.0-develop.9 ... 4 years ago
0.14.0-develop.8 ... 4 years ago
0.14.0-develop.7 ... 4 years ago
0.14.0-develop.6 ... 4 years ago
0.14.0-develop.5 ... 4 years ago
0.14.0-develop.4 ... 4 years ago
0.14.0-develop.3 ... 4 years ago
0.14.0-develop.2 ... 4 years ago
0.14.0-develop.1 ... 4 years ago
0.14.0-develop.0 ... 4 years ago
0.13.1 ... 4 years ago
0.13.1-develop.9 ... 4 years ago
0.13.1-develop.8 ... 4 years ago
0.13.1-develop.7 ... 4 years ago
0.13.1-develop.6 ... 4 years ago
0.13.1-develop.5 ... 4 years ago
0.13.1-develop.4 ... 4 years ago
0.13.1-develop.3 ... 4 years ago
0.13.1-develop.2 ... 4 years ago
0.13.1-develop.1 ... 4 years ago
0.13.1-develop.0 ... 4 years ago
0.13.0 ... 4 years ago
0.12.2-develop.8 ... 4 years ago
0.12.2-develop.7 ... 4 years ago
0.12.2-develop.6 ... 4 years ago
0.12.2-develop.5 ... 4 years ago
0.12.2-develop.4 ... 4 years ago
0.12.2-develop.3 ... 4 years ago
0.12.2-develop.2 ... 4 years ago
0.12.2-develop.1 ... 4 years ago
0.12.2-develop.0 ... 4 years ago
0.12.1 ... 4 years ago
0.13.0-develop.1 ... 4 years ago
0.13.0-develop.0 ... 4 years ago
0.12.1-develop.6 ... 4 years ago
0.12.1-develop.5 ... 4 years ago
0.12.1-develop.4 ... 4 years ago
0.12.1-develop.3 ... 4 years ago
0.12.1-develop.2 ... 4 years ago
0.12.1-develop.1 ... 4 years ago
0.12.1-develop.0 ... 4 years ago
0.12.0 ... 4 years ago
0.12.0-develop.0 ... 4 years ago
0.11.4-develop.16 ... 4 years ago
0.11.4-develop.15 ... 5 years ago
0.11.4-develop.14 ... 5 years ago
0.11.4-develop.13 ... 5 years ago
0.11.4-develop.12 ... 5 years ago
0.11.4-develop.11 ... 5 years ago
0.11.4-develop.10 ... 5 years ago
0.11.4-develop.9 ... 5 years ago
0.11.4-develop.8 ... 5 years ago
0.11.4-develop.7 ... 5 years ago
0.11.4-develop.6 ... 5 years ago
0.11.4-develop.5 ... 5 years ago
0.11.4-develop.4 ... 5 years ago
0.11.4-develop.3 ... 5 years ago
0.11.4-develop.2 ... 5 years ago
0.11.4-develop.1 ... 5 years ago
0.11.4-develop.0 ... 5 years ago
0.11.3 ... 5 years ago
0.11.3-develop.5 ... 5 years ago
0.11.3-develop.4 ... 5 years ago
0.11.3-develop.3 ... 5 years ago
0.11.3-develop.2 ... 5 years ago
0.11.3-develop.1 ... 5 years ago
0.11.3-develop.0 ... 5 years ago
0.11.2 ... 5 years ago
0.11.2-develop.4 ... 5 years ago
0.11.2-develop.3 ... 5 years ago
0.11.2-develop.2 ... 5 years ago
0.11.2-develop.1 ... 5 years ago
0.11.2-develop.0 ... 5 years ago
0.11.1 ... 5 years ago
0.11.0 ... 5 years ago
0.11.0-develop.2 ... 5 years ago
0.11.0-develop.1 ... 5 years ago
0.11.0-develop.0 ... 5 years ago
0.10.1-canary.1845.e12c713.0 ... 5 years ago
0.10.1-canary.1845.59bd858.0 ... 5 years ago
0.10.1-canary.1845.53ab8f2.0 ... 5 years ago
0.10.1-canary.d6ffddd.0 ... 5 years ago
0.10.1-canary.1845.84b0151.0 ... 5 years ago
0.10.1-canary.1845.03565a8.0 ... 5 years ago
0.10.1-canary.1845.55b6433.0 ... 5 years ago
0.10.1-canary.1845.b6bc4da.0 ... 5 years ago
0.10.1-canary.1845.845eb79.0 ... 5 years ago
0.10.1-canary.1845.c5b7a0b.0 ... 5 years ago
0.10.1-canary.1845.e38d064.0 ... 5 years ago
0.10.1-canary.1845.f6854fa.0 ... 5 years ago
0.10.1-canary.833ce50.0 ... 5 years ago
0.10.1-canary.f8d572b.0 ... 5 years ago
0.10.1-canary.fef3229.0 ... 5 years ago
0.10.1-develop.1 ... 5 years ago
0.10.1-develop.0 ... 5 years ago
0.10.1 ... 5 years ago
0.10.0 ... 5 years ago
0.9.2-develop.6 ... 5 years ago
0.9.2-develop.5 ... 5 years ago
0.9.2-develop.4 ... 5 years ago
0.9.2-canary.1808.ea70dad.0 ... 5 years ago
0.9.2-develop.1 ... 5 years ago
0.9.2-develop.0 ... 5 years ago
0.9.1 ... 5 years ago
0.9.1-develop.0 ... 5 years ago
0.9.0 ... 5 years ago
0.9.0-develop.1 ... 5 years ago
0.9.0-develop.0 ... 5 years ago
0.8.5-develop.0 ... 5 years ago
0.8.4 ... 5 years ago
0.8.4-develop.0 ... 5 years ago
0.8.3 ... 5 years ago
0.8.3-develop.0 ... 5 years ago
0.8.2 ... 5 years ago
0.8.2-develop.2 ... 5 years ago
0.8.2-develop.1 ... 5 years ago
0.8.2-develop.0 ... 5 years ago
0.8.1 ... 5 years ago
0.8.0 ... 5 years ago
0.8.0-develop.1 ... 5 years ago
0.8.0-develop.0 ... 5 years ago
0.7.5 ... 5 years ago
0.7.5-develop.0 ... 5 years ago
0.7.4 ... 5 years ago
0.7.4-develop.2 ... 5 years ago
0.7.4-develop.1 ... 5 years ago
0.7.4-develop.0 ... 5 years ago
0.7.3 ... 5 years ago
0.7.3-develop.1 ... 5 years ago
0.7.3-develop.0 ... 5 years ago
0.7.2 ... 5 years ago
0.7.1 ... 5 years ago
0.7.1-develop.0 ... 5 years ago
0.7.0-develop.0 ... 5 years ago
0.7.0 ... 5 years ago
0.6.3--canary.1653.a955910.0 ... 5 years ago
0.6.3--canary.ff3f3aa.0 ... 5 years ago
0.6.2 ... 5 years ago
0.6.3--canary.f25b73f.0 ... 5 years ago
0.7.0--canary.1423.3d0dfed.0 ... 5 years ago
0.6.2--canary.f29780f.0 ... 5 years ago
0.6.2--canary.18a25d9.0 ... 5 years ago
0.6.2--canary.1a59d80.0 ... 5 years ago
0.6.2--canary.1a8b410.0 ... 5 years ago
0.6.2--canary.35641aa.0 ... 5 years ago
0.6.2--canary.47f2ba3.0 ... 5 years ago
0.6.2--canary.02d957f.0 ... 5 years ago
0.6.2--canary.17d24e3.0 ... 5 years ago
0.6.2--canary.8aa6402.0 ... 5 years ago
0.6.2--canary.c08b70f.0 ... 5 years ago
0.6.1--canary.0244f49.0 ... 5 years ago
0.6.1-canary.1604.15f511c.0 ... 5 years ago
0.6.1-canary.1597.0435ddf.0 ... 5 years ago
0.6.1-canary.1808020.0 ... 5 years ago
0.6.0 ... 5 years ago
0.6.0-canary.8ff0379.1 ... 5 years ago
0.6.0-canary.8ff0379.0 ... 5 years ago
0.6.0-canary.d8b715d.0 ... 5 years ago
0.6.0-canary.ac60158.0 ... 5 years ago
0.6.0-canary.15c7a0b.0 ... 5 years ago
0.6.0-canary.4b34c2c.0 ... 5 years ago
0.6.0-alpha.8 ... 5 years ago
0.6.0-canary.c5a716a.0 ... 5 years ago
0.6.0-alpha.7 ... 5 years ago
0.6.0-alpha.6 ... 5 years ago
0.6.0-alpha.5 ... 5 years ago
0.3.5 ... 5 years ago
0.6.0-alpha.4 ... 5 years ago
0.6.0-alpha.1 ... 5 years ago
0.6.0-alpha.0 ... 5 years ago
0.5.0-alpha.1 ... 5 years ago
0.5.0-alpha.0 ... 5 years ago
0.3.4 ... 5 years ago
0.4.0-rc.13 ... 5 years ago
0.4.0-rc.11 ... 5 years ago
0.4.0-rc.7 ... 5 years ago
0.4.0-rc.6 ... 5 years ago
0.3.3 ... 5 years ago
0.3.2 ... 5 years ago
0.3.2-alpha.10 ... 5 years ago
0.4.0-rc.5 ... 6 years ago
0.4.0-rc.3 ... 6 years ago
0.4.0-rc.1 ... 6 years ago
0.4.0-alpha.2 ... 6 years ago
0.4.0-alpha.1 ... 6 years ago
0.4.0-highlight.0 ... 6 years ago
0.4.0-alpha.0 ... 6 years ago
0.3.1 ... 6 years ago
0.3.0 ... 6 years ago
0.3.0-alpha.6 ... 6 years ago
0.3.0-alpha.5 ... 6 years ago
0.3.0-alpha.4 ... 6 years ago
0.3.0-alpha.3 ... 6 years ago
0.3.0-alpha.2 ... 6 years ago
0.3.0-alpha.1 ... 6 years ago
0.3.0-alpha.0 ... 6 years ago