Installation

Install Stitches

Install Stitches from your terminal via npm or yarn.

# With npm
npm install @stitches/react

# With yarn
yarn add @stitches/react

Create your config file

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

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

This function receives a configuration object:

• prefix: Optionally prefix all classnames to avoid clashes.
• tokens: Define your design tokens, which map to CSS properties.
• breakpoints: Define reusable responsive breakpoints.
• utils: Create custom utils to improve your developer experience.

And returns two functions:

• styled: a function to create React components with styles.
• css: a function to create themes and SSR styles.

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

export const { styled, css } = createStyled({
  prefix: '',
  tokens: {},
  breakpoints: {},
  utils: {},
});

Note: From this point onwards, you'll be importing styled and css from where you've exported it.

Create your first component

Create a component file and import styled from your config file.

// Button.ts
import { styled } from 'path-to/stitches.config';

Then style your component.

const Button = styled('button', {
  backgroundColor: 'gainsboro',
  borderRadius: '9999px',
  fontSize: '13px',
  lineHeight: '1',
  fontWeight: 500,
  paddingTop: '10px',
  paddingBottom: '10px',
  paddingLeft: '16px',
  paddingRight: '16px',
  border: '0',
});

render(<Button>Button</Button>);

Finally, make sure to export your component so you can reuse it across your product.