Build your entire website using JSX and Props.

A CSS-in-JS framework built for React with props based utilities like display, fontSize or rotate.

xstyled

A CSS-in-JS framework built for React.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<x.div
  p={{ _: 3, md: 6 }}
  bg="white"
  display="flex"
  spaceX={4}
  alignItems="center"
  boxShadow
  borderRadius
>
  <x.div flexShrink={0}>
    <img height={12} width={12} src="/logo.png" alt="xstyled" />
  </x.div>
  <x.div>
    <x.h4
      text={{ _: "md", lg: "xl" }}
      fontWeight="medium"
      color="black"
    >
      xstyled
    </x.h4>
    <x.p color="gray-500" text="sm" my={1}>
      A CSS-in-JS framework built for React.
    </x.p>
  </x.div>
</x.div>

Made for React

With xstyled, CSS is declarative. It fits with React philosophy, writing CSS is as easy as writing props.

Universal

xstyled is compatible with styled-components and Emotion. It exposes a unified API on top of the most powerful CSS-in-JS libraries.

Consistent

Define all your design tokens in theme to create a consistent API for color choices, typography, spacing, shadows…

Flexible

xstyled is fully dynamic, it means you can use arbitrary values for everything without compromise.

Themeable

Give your components a new look in your next project. Create universes in the same project with dynamic theme switching.

Performant

Built on top of the two most performant CSS-in-JS library and heavily optimized, xstyled is really fast.

Responsive

Creating responsive and mobile first components has never been easier.

TypeScript Friendly

xstyled is written in TypeScript, types are built-in. Autocomplete all properties with values defined in your theme.

Dark Mode

Defines new colors in theme to enable dark mode for your project. Use system preference or Hooks to control it.

Extendable

Create new utilities, compose them with existing ones, publish it as plugin. Possibilities are infinite!

Modern

xstyled leverages cutting edge features like CSS grids, transforms, gradients. It makes it safe and easy.

Accessible

xstyled makes it easy to implement accessibility features like using rem instead of px.

Getting Started

Install xstyled

npm install styled-components @xstyled/styled-components

Setup `theme` and `Preflight`

// App.js
import {
  defaultTheme,
  ThemeProvider,
  Preflight,
} from '@xstyled/styled-components'

const theme = {
  ...defaultTheme,
  // Customize your theme here
}

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Preflight />
      {/* ... */}
    </ThemeProvider>
  )
}

Write your first component

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

function Button(props) {
  return <x.button bg="blue-500" {...props} />
}