Installation

How to install Stitches and get up and running.

Install Stitches from your terminal via npm or yarn.

# With npm
npm install @stitches/react
# With yarn
yarn add @stitches/react

Import styled from @stitches/react.

import { styled } from '@stitches/react';

Use the styled function to create a component and add styles to it.

import { styled } from '@stitches/react';
const Button = styled('button', {
backgroundColor: 'gainsboro',
borderRadius: '9999px',
fontSize: '13px',
padding: '10px 15px',
'&:hover': {
backgroundColor: 'lightgray',
},
});

Finally, render the component.

import { styled } from '@stitches/react';
const Button = styled('button', {...});
() => <Button>Button</Button>;

Aside from styled, these are the other functions available:

import {
styled,
css,
globalCss,
keyframes,
theme,
createTheme,
getCssText,
} from '@stitches/react';

Refer to the API page to learn more about each of them.

To configure Stitches, create a stitches.config.ts file (.js works too) and import the createStitches function.

// stitches.config.ts
import { createStitches } from '@stitches/react';

This function receives a configuration object:

  • theme: Define your design theme, which map to CSS properties.

  • media: Define reusable responsive breakpoints.

  • utils: Create custom utils to improve your developer experience.

  • prefix: Prefix class names and CSS variables to avoid clashes. Learn more.

  • themeMap: Define custom mapping of CSS properties to theme tokens. Learn more.

And returns all the available functions above.

// stitches.config.ts
import { createStitches } from '@stitches/react';
export const {
styled,
css,
globalCss,
keyframes,
getCssText,
theme,
createTheme,
config,
} = createStitches({
theme: {
colors: {
gray400: 'gainsboro',
gray500: 'lightgray',
},
},
media: {
bp1: '(min-width: 480px)',
},
utils: {
marginX: (value) => ({ marginLeft: value, marginRight: value }),
},
});

To see all configuration options, refer to the API page.

From this point onwards, you'll be importing styled and other functions from stitches.config.

import { styled } from 'path-to/stitches.config';
const Button = styled('button', {...});
() => <Button>Button</Button>;

If you prefer, you can add Stitches to your site using script tags.

<script src="https://unpkg.com/@stitches/react" crossorigin></script>

Then use it like this:

// without configuration
const { styled, css, globalCss } = stitches;
// with configuration
const { styled } = stitches.createStitches({ ...config });