A CSS-in-JS framework built for React.
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.
xstyled is written in TypeScript, types are built-in. Autocomplete all properties with values defined in your theme.
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.