Installation

Learn how to get xstyled up and running in your project.

Using styled-components

styled-components is a good default choice if you don't know about CSS-in-JS libraries.

If you already use styled-components on your project, then you should read Migrate from styled-components guide.

Install styled-components and xstyled via npm

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

Using Emotion

Emotion is as good as styled-components, using it is also a good choice!

If you already use Emotion on your project, then you should read Migrate from Emotion guide.

Install emotion and xstyled via npm

npm install @emotion/react @emotion/styled @xstyled/emotion

Setup theme and Preflight

// App.js
import { defaultTheme, ThemeProvider, Preflight } from '@xstyled/emotion'

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/emotion'

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