https://github.com/styled-components/xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://github.com/styled-components/xstyled

css css-in-js emotion react styled-components styled-system tailwindcss

Last synced: 24 days ago
JSON representation

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️

• Host: GitHub
• URL: https://github.com/styled-components/xstyled
• Owner: styled-components
• License: mit
• Created: 2019-05-24T13:35:56.000Z (about 7 years ago)
• Default Branch: main
• Last Pushed: 2024-05-10T16:10:34.000Z (about 2 years ago)
• Last Synced: 2025-05-06T02:16:11.035Z (about 1 year ago)
• Topics: css, css-in-js, emotion, react, styled-components, styled-system, tailwindcss
• Language: MDX
• Homepage: https://xstyled.dev
• Size: 182 MB
• Stars: 2,300
• Watchers: 13
• Forks: 107
• Open Issues: 36
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-github-projects - xstyled - A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️ ⭐2,305 `MDX` 🔥 (🌐 Web Development - Frontend)

README

          


  



A utility-first CSS-in-JS framework built for React.


[![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)

![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)

```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/installation/)

- [Motivation](https://xstyled.dev/docs/introduction/#story)

## Example

```js

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

function Example() {

  return (

    

      

        

      

      

        

          xstyled

        

        A CSS-in-JS framework built for React.

      

    

  )

}

```

## License

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

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