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} /> }
Edit this page on GitHub