Logo

Style your components with confidence

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

Get Started

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

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus repellat laudantium.

Bundle size (Core)
5.9kb
Bundle size (React)
6.1kb
Runtime interpolations
Zero
Variants
∞

Variants

Design composable component APIs with variants

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

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 { createTheme } = createStitches({
 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%)',
  }
 }
});

Stats at a glance

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repellendus repellat laudantium.

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.

Smart tokens

Save time with smart, typed token mapping

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

Utils

Turbocharge your coding speed with custom CSS properties

Invent 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 } = createStitches({
 utils: {
  pt: (value) => ({
   paddingTop: value,
  }),
  pr: (value) => ({
   paddingRight: value,
  }),
  pb: (value) => ({
   paddingBottom: value,
  }),
  pl: (value) => ({
   paddingLeft: value,
  }),
 },
});

Testimonials

Sharing some love from the community ❤️

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!

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.

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.

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 🔥🔥

The @modulzcrew 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

Listening to @peduartetalk 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

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.

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.

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.

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.

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

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.

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).

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

I’m feeling that way about @stitchesjs now.

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! 🚀

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.

on a side project and it's quite fun so far.

@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.

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

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

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 😅

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!

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.

I'm constantly in contact with the larger creative community.

Get involved in our community. Everyone is welcome!

Twitter
For announcements, blog posts, and general Stitches tips.
Discord
To get involved in the community, ask questions, and share tips.
GitHub
To file issues, request features, and contribute, check out our GitHub.