# @xstyled/system

> xstyled system utilities.

Latest version **3.8.3** (published 2026-05-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @xstyled/system
pnpm add @xstyled/system
yarn add @xstyled/system
bun add @xstyled/system
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.8.3 |
| Published | 2026-05-21 |
| First published | 2019-05-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 538.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 2302 |
| Author | Greg Bergé |
| Maintainers | probablyup, neoziro |
| Keywords | emotion, styled-components, css, system, styled-system, tailwindcss |

## Links

- npm: https://www.npmjs.com/package/@xstyled/system
- Repository: https://github.com/styled-components/xstyled.git#main
- Homepage: https://xstyled.dev
- Issues: https://github.com/styled-components/xstyled/issues
- Funding: https://opencollective.com/styled-components
- npm.io page: https://npm.io/package/@xstyled/system

## Dependencies (2)

- [csstype](https://npm.io/package/csstype.md) ^3.1.1
- [@xstyled/util](https://npm.io/package/@xstyled/util.md) ^3.7.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 3.8.3 (latest) — 2026-05-21
- 3.0.0-beta.2 (next) — 2021-05-24
- 3.8.2 — 2026-01-08
- 3.8.1 — 2024-05-08
- 3.8.0 — 2023-04-03
- 3.7.5 — 2023-03-27
- 3.7.4 — 2023-03-27
- 3.7.3 — 2023-03-17
- 3.7.2 — 2023-03-17
- 3.7.1 — 2023-03-16
- 3.7.0 — 2022-10-05
- 3.6.0 — 2022-04-15
- 3.5.1 — 2022-01-10
- 3.5.0 — 2022-01-10
- 3.2.0 — 2021-12-22
- … 51 more at https://npm.io/package/@xstyled/system/versions

## README

<h1 align="center">
  <img src="https://raw.githubusercontent.com/styled-components/xstyled/main/resources/xstyled-logo.jpg" alt="xstyled" title="xstyled" width="300">
</h1>
<p align="center" style="font-size: 1.2rem;">A utility-first CSS-in-JS framework built for React.</p>

[![License](https://img.shields.io/npm/l/@xstyled/system.svg)](https://github.com/styled-components/xstyled/blob/master/LICENSE)
[![npm package](https://img.shields.io/npm/v/@xstyled/system/latest.svg)](https://www.npmjs.com/package/@xstyled/system)
[![npm downloads](https://img.shields.io/npm/dm/@xstyled/system.svg)](https://www.npmjs.com/package/@xstyled/system)
[![CircleCI](https://circleci.com/gh/styled-components/xstyled.svg?style=svg)](https://circleci.com/gh/styled-components/xstyled)
[![codecov](https://codecov.io/gh/styled-components/xstyled/branch/master/graph/badge.svg)](https://codecov.io/gh/styled-components/xstyled)
![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)
[![Dependencies](https://img.shields.io/david/styled-components/xstyled.svg?path=packages%2Fsystem)](https://david-dm.org/styled-components/xstyled?path=packages/system)
[![DevDependencies](https://img.shields.io/david/dev/styled-components/xstyled.svg)](https://david-dm.org/styled-components/xstyled?type=dev)
[![Small size](https://img.badgesize.io/https://unpkg.com/@xstyled/styled-components/dist/xstyled-system.min.js?compression=gzip)](https://unpkg.com/@xstyled/styled-components/dist/xstyled-system.min.js)

```bash
npm install @xstyled/system
```

## [Docs](https://xstyled.dev)

**See the documentation at [xstyled.dev](https://xstyled.dev)** for more information about using xstyled!

Quicklinks to some of the most-visited pages:

- [**Getting started**](https://xstyled.dev/docs/getting-started/)
- [System](https://xstyled.dev/docs/system/)

## Example

```js
import styled from 'styled-components'
import { system } from '@xstyled/system'

const Box = styled.div(system)

export default Box
```

## License

Licensed under the MIT License, Copyright © 2019-present Greg Bergé.

See [LICENSE](./LICENSE) for more information.

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