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

To see a 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, global } = stitches;
// with configuration
const { styled } = stitches.createCss({ ...config });