Install Stitches from your terminal via npm or yarn.
# With npm
npm install @stitches/react
# With yarn
yarn add @stitches/react
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
andcss
from where you've exported it.
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.