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: Optionally prefix all classnames to avoid clashes.
• insertionMethod: Define how the style tag is inserted.
• themeMap: Define custom mapping of CSS properties to theme tokens.

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: {},
  media: {},
  utils: {},
  prefix: '',
  insertionMethod: 'append | prepend | () => {}',
  themeMap: {},
});

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});