# @xstyled/styled-components

> A utility-first CSS-in-JS framework built for React (styled-components bindings).

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

## Install

```sh
npm install @xstyled/styled-components
pnpm add @xstyled/styled-components
yarn add @xstyled/styled-components
bun add @xstyled/styled-components
```

## Health

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

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

Warnings: low downloads.

## Facts

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

## Links

- npm: https://www.npmjs.com/package/@xstyled/styled-components
- 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/styled-components

## Dependencies (4)

- [@xstyled/core](https://npm.io/package/@xstyled/core.md) ^3.8.2
- [@xstyled/util](https://npm.io/package/@xstyled/util.md) ^3.7.0
- [@xstyled/system](https://npm.io/package/@xstyled/system.md) ^3.8.3
- [@emotion/is-prop-valid](https://npm.io/package/@emotion/is-prop-valid.md) ^1.2.2

## 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

- 4.1.1 (latest) — 2026-05-21
- 4.0.1-test.0 (test) — 2024-05-10
- 4.0.0-beta.2 (beta) — 2024-05-08
- 3.0.0-beta.2 (next) — 2021-05-24
- 4.1.0 — 2026-01-08
- 4.0.0 — 2024-05-09
- 3.8.1 — 2024-05-08
- 4.0.0-beta.1 — 2024-05-08
- 4.0.0-beta.0 — 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
- … 77 more at https://npm.io/package/@xstyled/styled-components/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/styled-components.svg)](https://github.com/styled-components/xstyled/blob/master/LICENSE)
[![npm package](https://img.shields.io/npm/v/@xstyled/styled-components/latest.svg)](https://www.npmjs.com/package/@xstyled/styled-components)
[![npm downloads](https://img.shields.io/npm/dm/@xstyled/styled-components.svg)](https://www.npmjs.com/package/@xstyled/styled-components)
[![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%2Fstyled-components)](https://david-dm.org/styled-components/xstyled?path=packages/styled-components)
[![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-emotion.min.js?compression=gzip)](https://unpkg.com/@xstyled/styled-components/dist/xstyled-emotion.min.js)

```bash
npm install @xstyled/styled-components styled-components
```

## [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/)
- [Motivation](https://xstyled.dev/docs/motivation/)
- [System](https://xstyled.dev/docs/system/)

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

function Example() {
  return (
    <x.div p={{ _: 3, md: 6 }} bg="white" display="flex" spaceX={4}>
      <x.div flexShrink={0}>
        <x.img h={12} w={12} src="/img/logo.svg" alt="xstyled Logo" />
      </x.div>
      <x.div>
        <x.h4
          fontSize={{ _: 'md', lg: 'xl' }}
          fontWeight="medium"
          color="black"
        >
          xstyled
        </x.h4>
        <x.p color="gray-500">A CSS-in-JS framework built for React.</x.p>
      </x.div>
    </x.div>
  )
}
```

## License

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

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

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