Stitches

The modern styling library

Near-zero runtime, server-side rendering, multi-variant support, and a best-in-class developer experience.

const Button = styled('button', {
  // Edit the code!

  backgroundColor: 'hsl(206,100%,50%)',
  borderRadius: '9999px',
  color: 'white',
  fontSize: '17px',
  fontWeight: 500,
  paddingTop: '10px',
  paddingBottom: '10px',
  paddingLeft: '16px',
  paddingRight: '16px',
  textDecoration: 'none',
  appearance: 'none',
  transition: 'all 200ms ease',
  margin: '0px 8px',

  ':hover': {
    boxShadow: '0 5px 15px rgba(0, 0, 0, .12)',
    transform: 'translateY(-2px)',
  },

  variants: {
    color: {
      white: {
        backgroundColor: 'transparent',
        color: 'hsl(206,10%,44%)',
        ':hover': {
          backgroundColor: 'white',
          color: 'hsl(206,10%,5%)',
        },
      },
    }
  }
});

render(
  <div style={{ display: 'flex', justifyContent: 'center' }}>
    <Button as="a" href="/docs/installation">Documentation</Button>
    <Button color="white" as="a" href="https://github.com/modulz/stitches">GitHub</Button>
  </div>
);

const Button = styled('button', {
  // Edit the code!
  backgroundColor: 'hsl(206,100%,50%)',
  borderRadius: '9999px',
  color: 'white',
  fontSize: '17px',
  fontWeight: 500,
  paddingTop: '10px',
  paddingBottom: '10px',
  paddingLeft: '16px',
  paddingRight: '16px',
  textDecoration: 'none',
  appearance: 'none',
  transition: 'all 200ms ease',
  margin: '0px 8px',
  ':hover': {
    boxShadow: '0 5px 15px rgba(0, 0, 0, .12)',
    transform: 'translateY(-2px)',
  },
  variants: {
    color: {
      white: {
        backgroundColor: 'transparent',
        color: 'hsl(206,10%,44%)',
        ':hover': {
          backgroundColor: 'white',
          color: 'hsl(206,10%,5%)',
        },
      },
    }
  }
});
render(
  <div style={{ display: 'flex', justifyContent: 'center' }}>
    <Button as="a" href="/docs/installation">Documentation</Button>
    <Button color="white" as="a" href="https://github.com/modulz/stitches">GitHub</Button>
  </div>
);

npm install @stitches/react

Features

A fully-featured styling library.

Performant

Stitches avoids unnecessary prop interpolations at runtime, making it significantly more performant than other styling libraries.

Lightweight

Both @stitches/core and @stitches/react libraries combined weigh in at ~8.0kb gzipped.

Server-Side Rendering

Stitches supports cross-browser server-side rendering, even for responsive styles and variants.

Variants

Variants are a first-class citizen of Stitches, so you can design composable component APIs which are typed automatically.

Theming

Define multiple themes with CSS variables, then expose them to any part of your app.

Developer experience

With a fully-typed API, token-aware properties, and custom utils, Stitches provides a fun and intuitive DX.

Critical Path CSS

Stitches only injects the styles which are actually used, so your users don't download unnecessary CSS.

Specificity

No more specificity issues due to the atomic output. Even extended components (via the as prop) won't contain duplicate CSS properties.

Polymorphic `as` prop

Included in Components returned from the styled function

Easy overrides

Stitches provides a css prop, which allows style overrides to be applied in the consumption layer.