Stitches (CSS-in-JS)

Definition

Stitches is a CSS-in-JS library, created by the Modulz (now Radix) team, that lets developers define styled components in JavaScript or TypeScript with a first-class variants API and near-zero runtime overhead through aggressive style caching and server-side extraction.

Overview

Stitches was built to keep the developer experience of styled-components-style CSS-in-JS — defining components with a `styled()` function, colocating styles with component code — while addressing that generation's runtime performance cost. It achieves this through a caching architecture: styles are inserted into the stylesheet once per unique style combination and reused across renders and instances, rather than recomputed and re-inserted on every render, which Stitches' authors reported reduced its runtime cost close to that of zero-runtime alternatives, though it still technically executes JavaScript in the browser to manage the stylesheet, unlike fully static-output tools such as Vanilla Extract. Stitches' most distinctive feature is its built-in variants API: a `styled()` component definition can declare `variants` (like `size: { small, medium, large }` or `color: { primary, secondary }`) directly as part of the component, plus `compoundVariants` for style combinations that apply only when multiple variant props are set together, all with full TypeScript inference so that invalid variant values are caught at compile time. This variants pattern was influential enough that it inspired the standalone `class-variance-authority` (cva) library, which extracted the same variant-definition pattern for use with plain Tailwind-style class strings rather than Stitches' own styled-component model. Stitches also includes a built-in theming system using a `createTheme()`-style API that generates CSS custom properties, responsive style props (allowing breakpoint-specific values directly in style objects), and utility shorthand definitions. Development on Stitches itself slowed significantly after its creators, formerly of Modulz, shifted focus to Radix (Radix UI and Radix Primitives), and the broader CSS-in-JS ecosystem has generally moved toward zero-runtime, build-time-extraction tools like Vanilla Extract and Panda CSS as the preferred pattern for new projects, making Stitches today more commonly encountered in existing codebases than adopted fresh.

Key Features

• styled() API for defining components with colocated CSS-in-JS styles
• First-class variants and compoundVariants API with full TypeScript inference
• Style caching architecture that reuses generated CSS across renders for near-zero runtime cost
• Built-in theming via a createTheme()-style API generating CSS custom properties
• Responsive style props allowing breakpoint-specific values directly in style objects
• Server-side rendering support with style extraction to avoid flash of unstyled content
• Influenced the standalone class-variance-authority (cva) variants pattern
• Created by the team behind Radix UI

Use Cases

Alternatives

History

Stitches is a CSS-in-JS styling library known for its near-zero runtime, built-in server-side rendering, and first-class support for variants. It came from Modulz, a design-tooling company, with contributions from Christian Alfoni, and was introduced in 2020. Stitches minimized runtime cost by avoiding unnecessary prop interpolation and computing as much as possible ahead of time, and it made "variants" (including compound variants) a core part of the API, which made it well suited to building typed, composable component design systems. Both its core and React packages were small (~6kb gzipped). Stitches was influential on later styling tools, though it is no longer actively maintained as of 2023.

Frequently Asked Questions

Related in Web