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.

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

Made for React

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


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


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


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


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


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


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.


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


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


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