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