The 2024 Tidelift state of the open source maintainer report! 📊 Read now!

@xstyled/styled-components
Release 2.0.0

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

Keywords: styled-components, css, system, styled-system, tailwindcss, css-in-js, emotion, react
License: MIT
Install: npm install @xstyled/styled-components@2.0.0

Documentation

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

npm install @xstyled/styled-components styled-components

Docs

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

Quicklinks to some of the most-visited pages:

Example

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>
  )
}