Stitches
By Stitches contributors
Stitches is a CSS-in-JS library designed for near-zero runtime overhead, offering a styled-components-like API for defining component styles in JavaScript while precompiling as much as possible ahead of time. It includes built-in support…
Definition
Stitches is a CSS-in-JS library designed for near-zero runtime overhead, offering a styled-components-like API for defining component styles in JavaScript while precompiling as much as possible ahead of time. It includes built-in support for design tokens, responsive variants, and theming through a typed configuration object. It targets teams wanting a highly performant, strongly typed CSS-in-JS solution with first-class variant and theming support.
Overview
Stitches emerged as part of a wave of CSS-in-JS libraries responding to performance criticisms of earlier runtime-heavy approaches like styled-components and Emotion, aiming to keep the ergonomic styled API those libraries popularized while dramatically reducing the JavaScript work done in the browser. Rather than fully extracting styles at build time like Linaria, Stitches minimizes runtime cost by precomputing style objects and generating atomic CSS classes efficiently, caching aggressively so repeated style computations remain cheap during re-renders and re-mounts of the same component elsewhere on the page. A defining feature is its built-in variants API: a component defined with Stitches can declare named style variants, such as a size variant with small and large options or a color variant with primary and secondary options, directly in its style definition, and Stitches generates the corresponding CSS and TypeScript types automatically, so selecting a variant is both type-checked and produces minimal, deduplicated CSS output. Its theming system uses a central token configuration object, and responsive styles are expressed through a compact object syntax mapped to configured breakpoints rather than manually written media queries. Compared to Linaria's build-time extraction model, Stitches keeps more of its logic at runtime but is engineered to be extremely fast at that runtime work, positioning it as a middle ground between fully runtime libraries like Emotion and fully static ones like Linaria or vanilla-extract. Its typed variant system is more built-in and structured than the more free-form template literal styling of styled-components, which requires additional patterns to achieve similar variant ergonomics. Stitches is used in component libraries and design systems that want strongly typed, colocated styles with first-class support for style variants and theme tokens, particularly in TypeScript-heavy codebases where compile-time checking of valid variant combinations is valued by the team. Its atomic CSS output also keeps final stylesheet size relatively small even as a component library grows in scope. As a library, Stitches has seen slower development activity in recent years relative to newer zero-runtime approaches and utility-first alternatives, and teams starting new projects should weigh its current maintenance status against actively developed options like vanilla-extract, Panda CSS, or Tailwind CSS before committing a new design system to it. Existing Stitches-based codebases generally continue to function well, since the library's scope was already stable by the time development slowed, and its atomic CSS output does not degrade with age even without frequent library updates or active new feature development.
Key Features
- Near-zero runtime overhead through precomputed, cached style generation
- Built-in typed variants API for component style variations
- Central theme token configuration for consistent design values
- Compact responsive syntax mapped to configured breakpoints
- Atomic CSS output minimizing duplicated style rules
- Strong TypeScript integration for variant type checking
- Familiar styled-components-like authoring API