Style your components with confidence

CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.

Documentation

GitHub

npm install @stitches/react

Performant

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

Feature-rich

Packed full of useful features like theming, smart tokens, css prop, as prop, utils, and a fully-typed API.

Best-in-class DX

Stitches has a fully-typed API, to minimize the learning curve, and provide the best possible developer experience.

Framework-agnostic

Stitches has a dedicated React lib, but @stitches/core works with any framework including Vue, Svelte, and even vanilla HTML.

Stats at a glance

Bundle size (Core)6.1kb

Bundle size (React)6.3kb

Runtime interpolationsZero

Variants∞

Variants

Design composable component APIs with variantsVariants are a first-class citizen of Stitches. With multiple variants, compound variants, and default variants, you can design composable component APIs which are typed automatically.

const Button = styled('button', {
  // base styles

  variants: {
    color: {
      gray: {
        backgroundColor: 'gainsboro',
      },
      blue: {
        backgroundColor: 'dodgerblue',
      },
    },
    size: {
      md: {
        height: '25px',
      },
      lg: {
        height: '35px',
      }
    }
  },

  compoundVariants: [{
    color: 'blue',
    size: 'lg',
    css: {
      backgroundColor: 'purple',
    }
  }],

  defaultVariants: {
    color: 'gray',
    size: 'md',
  }
});

const Button = styled('button', {
  // base styles

  variants: {
    color: {
      gray: {
        backgroundColor: 'gainsboro',
      },
      blue: {
        backgroundColor: 'dodgerblue',
      },
    },
    size: {
      md: {
        height: '25px',
      },
      lg: {
        height: '35px',
      }
    }
  },

  compoundVariants: [{
    color: 'blue',
    size: 'lg',
    css: {
      backgroundColor: 'purple',
    }
  }],

  defaultVariants: {
    color: 'gray',
    size: 'md',
  }
});

Theming

Dark mode is effortless with built-in theming.Stitches has built-in solutions for tokens and theming, which use CSS variables under-the-hood. You can define multiple themes, then expose them to any part of your app.

const { theme } = createCss({
  theme: {
    fonts: {},
    space: {},
    sizes: {},
    fontSizes: {},
    fontWeights: {},
    lineHeights: {},
    letterSpacings: {},
    radii: {},
    zIndices: {},
    colors: {
      gray100: 'hsl(206 14% 96%)',
      gray200: 'hsl(206 12% 90%)',
      gray300: 'hsl(206 6% 56%)',
      gray400: 'hsl(206 6% 44%)',
      violet100: 'hsl(252 87% 96%)',
      violet200: 'hsl(252 83% 87%)',
      violet300: 'hsl(252 62% 54%)',
      violet400: 'hsl(250 55% 48%)',

      // token aliases
      background: '$gray100',
      line: '$gray200',
      text: '$gray400',
      accent: '$violet300',
    }
  }
});

const darkTheme = theme({
  colors: {
    gray100: 'hsl(201 6% 12%)',
    gray200: 'hsl(203 6% 25%)',
    gray300: 'hsl(206 6% 44%)',
    gray400: 'hsl(205 5% 53%)',
    violet100: 'hsl(250 34% 16%)',
    violet200: 'hsl(251 43% 31%)',
    violet300: 'hsl(252 58% 50%)',
    violet400: 'hsl(250 100% 76%)',

    // token aliases
    background: '$gray100',
    line: '$gray200',
    text: '$gray400',
    accent: '$violet300',
  },
});

const { theme } = createCss({
  theme: {
    fonts: {},
    space: {},
    sizes: {},
    fontSizes: {},
    fontWeights: {},
    lineHeights: {},
    letterSpacings: {},
    radii: {},
    zIndices: {},
    colors: {
      gray100: 'hsl(206 14% 96%)',
      gray200: 'hsl(206 12% 90%)',
      gray300: 'hsl(206 6% 56%)',
      gray400: 'hsl(206 6% 44%)',
      violet100: 'hsl(252 87% 96%)',
      violet200: 'hsl(252 83% 87%)',
      violet300: 'hsl(252 62% 54%)',
      violet400: 'hsl(250 55% 48%)',

      // token aliases
      background: '$gray100',
      line: '$gray200',
      text: '$gray400',
      accent: '$violet300',
    }
  }
});

const darkTheme = theme({
  colors: {
    gray100: 'hsl(201 6% 12%)',
    gray200: 'hsl(203 6% 25%)',
    gray300: 'hsl(206 6% 44%)',
    gray400: 'hsl(205 5% 53%)',
    violet100: 'hsl(250 34% 16%)',
    violet200: 'hsl(251 43% 31%)',
    violet300: 'hsl(252 58% 50%)',
    violet400: 'hsl(250 100% 76%)',

    // token aliases
    background: '$gray100',
    line: '$gray200',
    text: '$gray400',
    accent: '$violet300',
  },
});

Testimonials

Sharing some love from the community <3

Evan Hennessy@hennessyevan

Of all the libraries I’ve built design systems with: SC, emotion, xstyled, styled-system, theme-ui etc., @stitchesjs has been the most ergonomic and enjoyable. Took a look at the roadmap and it looks like it’s getting even better.

Giuseppe@giuseppegurgone

I have been maintainer of SUIT CSS, worked on design systems at scale when we still called them Styleguide, created a couple of CSS in JS libs and watched this space for a long while and @stitchesjs seems the most promising library out there.

Anna Carolina@accezr

I've been using Stitches + Radix to build a base component library for our Design System and I have to say that I'm loving the development experience. Thanks to @modulz for making my life easier. The latest updates are 🔥🔥

Dylan Klohr@dylanklohr

The @modulz crew IS without a DOUBT the most devoted crew I've seen. NEVER have I seen a team respond to a bug report, in a CANARY build, via a discord channel and had the issue resolved by a maintainer in < 10 minutes. 🤯 @jon_neal.

Mark Dalgleish@markdalgleish

Listening to @peduarte talk about @stitchesjs, the penny finally dropped for me. They've designed an API that feels like it belongs in the options panel of a design tool because, of course, they're also building @modulz.

Rauno Freiberg@raunofreiberg

Been using @stitchesjs for a week on an actual product and I've never had such a smooth collaboration, shared vocabulary, and mutual understanding with our designer. Setting up tokens and being very systematic and constrained about the UI we build has never been easier.

Mike San Román@msanromanv

This definitely feels like a step forward, not only because of the performance benefits, SSR support, etc., but the developer experience is amazing.

I think I haven't been as excited about a styling lib ever.

Răzvan Pavel@razvan_pavel

Something I don't see very often in any tech or product reading: developer & debug experience! It's this focus on using tech as a tool and putting humans first that makes products successful. @stitchesjs will probably be around for a while.

�

🆅🅸🅽🅲🅴@1stfloor

The cool thing for me as a designer was seeing the systematic approach to using design tokens at a level I could understand 😂 I believe the gap between design and development is finally narrowing and solutions like Stitches and Modulz speed up this process.

Joe Bell 🔔@joebell_

Stitches pretty much ticks everything off on my CSS-in-JS wish list. I couldn't go back to writing CSS without it.

Gianmarco Simone ✨@ggsimm

I'm a @stitchesjs convert now. This is just a superior way of writing css-in-js, and I'm excited to see where it goes.

Chris@chrishbrown55

This might be the best implementation of CSS-in-JS yet. It does what CSS-in-JS has always failed to do in the past: fix all the problems that CSS had already solved (and Sass).

Kyle Holmberg@kylemh_

I haven’t been excited by tech tooling since Next.js 2 years ago.

I’m feeling that way about @stitchesjs now.

Kevin Wolf@elkevinwolf

I am really impressed with Stitches by @modulz . Creating a design system with strong TypeScript support and ease of extension has never been easier. Great job @peduarte and team! 🚀

Jimmy Cleveland@JimmyDCleveland

I haven't been much of a fan of js object syntax for css in the past, but I've been trying out @stitchesjs on a side project and it's quite fun so far.

The performance promises and type-hinting make it really appealing right away. Good docs as well.

Hyeseong Kim@KrComet

@stitchesjs is the best. Now I'm pretty sure every CSS in JS libs should have a (static) variants API as a 1st-class citizen.

Cristiano Rastelli@areaweb

I must say, really impressed by how neat and well-thought is the API of @stitchesjs .

Juan Di Toro@ditorojuanf

This is 🔥 from the docs you can already see how helpful this is for designing component libraries with great system design definitions.

ற

றதீஸ் / raðiːs / rathes@rswebdesigner

One of the reasons why I really love @stitchesjs: This whole skeleton component took me like 5 minutes? Including all variants. In other CSS-in-JS solutions, this would take ages 😅

Fabio Vedovelli@vedovelli74

Eu tenho faro para identificar tecnologias que se popularizaram: gravei sobre Laravel em 2011, sobre Vue em 2015 e Tailwind em 2020.

Algo me diz que @stitchesjs: estará no mesmo nível de popularidade em breve!

Smart tokens

Save time with smart, typed token mappingTokens automatically map to the most appropriate scale—with a simple syntax—for a smooth developer experience. You can customise the default mapping with our themeMap object, or override the default on a case-by-case basis.

const Button = styled("button", {
  color: '$violet400',
  paddingLeft: '$4',
  paddingRight: '$4',
  height: '$6',
  fontSize: '$3',
  border: '1px solid $pink500',

  height: '$space$6',
  paddingLeft: '$sizes$4',
  paddingRight: '$sizes$4',
});

const Button = styled("button", {
  color: '$violet400',
  paddingLeft: '$4',
  paddingRight: '$4',
  height: '$6',
  fontSize: '$3',
  border: '1px solid $pink500',

  height: '$space$6',
  paddingLeft: '$sizes$4',
  paddingRight: '$sizes$4',
});

Utils

Turbocharge your coding speed with custom CSS propertiesInvent your own custom CSS properties with our utils feature. Speed up your workflow by abbreviating CSS properties, grouping multiple CSS properties together, or simplifying a tricky syntax.

export const { styled, css } = createCss({
  utils: {
    pt: (config) => (value) => ({
      paddingTop: value,
    }),
    pr: (config) => (value) => ({
      paddingRight: value,
    }),
    pb: (config) => (value) => ({
      paddingBottom: value,
    }),
    pl: (config) => (value) => ({
      paddingLeft: value,
    }),

    px: (config) => (value) => ({
      paddingLeft: value,
      paddingRight: value,
    }),
    py: (config) => (value) => ({
      paddingTop: value,
      paddingBottom: value,
    }),
    size: (config) => (value) => ({
      width: value,
      height: value,
    }),

    linearGradient: (config) => (value) => ({
      backgroundImage: `linear-gradient(${value})`,
    }),
  },
});

export const { styled, css } = createCss({
  utils: {
    pt: (config) => (value) => ({
      paddingTop: value,
    }),
    pr: (config) => (value) => ({
      paddingRight: value,
    }),
    pb: (config) => (value) => ({
      paddingBottom: value,
    }),
    pl: (config) => (value) => ({
      paddingLeft: value,
    }),

    px: (config) => (value) => ({
      paddingLeft: value,
      paddingRight: value,
    }),
    py: (config) => (value) => ({
      paddingTop: value,
      paddingBottom: value,
    }),
    size: (config) => (value) => ({
      width: value,
      height: value,
    }),

    linearGradient: (config) => (value) => ({
      backgroundImage: `linear-gradient(${value})`,
    }),
  },
});

Features

A fully-featured styling library.

Performant

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

Server-side rendering

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

Developer experience

With a fully-typed API, token-aware properties, and custom utils, Stitches offers 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.

Override component tags

A polymorphic as prop is included in components returned from the styled function.

Override component styles

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

Community

Get involved in our community. Everyone is welcome!

Style your components with confidence

Performant

Feature-rich

Best-in-class DX

Framework-agnostic

Stats at a glance

Features

Performant

Server-side rendering

Developer experience

Critical Path CSS

Override component tags

Override component styles

Community

Twitter

Discord

GitHub