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, global, keyframes, getCssString } 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 createCss function.

// stitches.config.ts
import { createCss } 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, plus:

• theme: a function for creating additional themes.

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

export const { styled, css, global, keyframes, getCssString, theme } = createCss({
  theme: {
    colors: {
      gray400: 'gainsboro',
      gray500: 'lightgray',
    },
  },
  media: {
    bp1: '(min-width: 480px)',
  },
  utils: {
    marginX: (config) => (value) => ({ marginLeft: value, marginRight: value }),
  },
});

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, global } = stitches;

// with configuration
const { styled } = stitches.createCss({ ...config });