# @theme-ui/css

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

Latest version **0.17.4** (published 2026-01-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @theme-ui/css
pnpm add @theme-ui/css
yarn add @theme-ui/css
bun add @theme-ui/css
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.17.4 |
| Published | 2026-01-02 |
| First published | 2019-12-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 174.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5398 |
| Author | Brent Jackson |
| Maintainers | jxnblk, johno, hasparus, lachlanjc |

## Links

- npm: https://www.npmjs.com/package/@theme-ui/css
- Repository: https://github.com/system-ui/theme-ui
- Homepage: https://github.com/system-ui/theme-ui#readme
- Issues: https://github.com/system-ui/theme-ui/issues
- npm.io page: https://npm.io/package/@theme-ui/css

## Dependencies (1)

- [csstype](https://npm.io/package/csstype.md) ^3.0.10

## Recent versions

- 0.17.4 (latest) — 2026-01-02
- 0.17.2-develop.1 (develop) — 2025-02-14
- 0.16.2-scale-tuples.0 (canary) — 2023-09-26
- 0.6.0-alpha.8 (next) — 2021-03-19
- 0.4.0-highlight.0 (highlight) — 2020-05-08
- 0.17.2 — 2025-02-14
- 0.17.2-develop.0 — 2024-12-18
- 0.17.1 — 2024-10-24
- 0.17.1-develop.0 — 2024-10-24
- 0.17.0 — 2024-10-18
- 0.17.0-develop.1 — 2024-10-18
- 0.17.0-develop.0 — 2024-10-18
- 0.16.2 — 2024-02-19
- 0.16.2-develop.5 — 2024-02-19
- 0.16.2-develop.2 — 2024-01-05
- … 421 more at https://npm.io/package/@theme-ui/css/versions

## README

# @theme-ui/css

[![Minified Size on Bundlephobia](https://badgen.net/bundlephobia/minzip/@theme-ui/css)](https://bundlephobia.com/package/@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.

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

## Usage

```js
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](https://codesandbox.io/s/theme-ui-css-framework-agnostic-2c0ue?file=/src/index.js)

---
_Source: https://npm.io/package/@theme-ui/css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._