xstyled

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

CSS in JSReactAtomic CSS
styled-components/xstyledxstyled.dev@xstyled/styled-components

README

xstyled

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


License
npm package
npm downloads
CircleCI
codecov
Code style

  1. ```bash
  2. npm install @xstyled/styled-components styled-components
  3. ```

Docs


See the documentation at xstyled.dev for more information about using xstyled!

Quicklinks to some of the most-visited pages:

- [Getting started](https://xstyled.dev/docs/installation/)
- Motivation

Example


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

  4. function Example() {
  5.   return (
  6.     <x.div p={{ _: 3, md: 6 }} bg="white" display="flex" spaceX={4}>
  7.       <x.div flexShrink={0}>
  8.         <x.img h={12} w={12} src="/img/logo.svg" alt="xstyled Logo" />
  9.       </x.div>
  10.       <x.div>
  11.         <x.h4
  12.           fontSize={{ _: 'md', lg: 'xl' }}
  13.           fontWeight="medium"
  14.           color="black"
  15.         >
  16.           xstyled
  17.         </x.h4>
  18.         <x.p color="gray-500">A CSS-in-JS framework built for React.</x.p>
  19.       </x.div>
  20.     </x.div>
  21.   )
  22. }
  23. ```

License


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

See LICENSE for more information.