#1 Library of the Week: Stitches
I felt adventurous today, so I decided to have a look at Stitches - a potential styled-components replacement. The only reason to do so was because I grew interested in the company behind it - Modulz. I am satisfied with my styled-components workflow, so I didn't have great expectations towards Stitches. I am glad to admit I was wrong; I am now looking forward to building my future projects with it.
Useful links:
- Stitches website
- Modulz
- styled-components
- Sandbox
- Pedro Duarte - "So You Think You Can Build A Dropdown?" (Next.js Conf 2021)
Stitches is a CSS-in-JS library that doesn't do anything revolutionary. Its API seems to resemble the one we are familiar with from styled-components, and for the first few minutes, I've had a tough time thinking of a reason for why it was built. Then, it struck me.
The library created by a great company Modulz (that I learned of from a fantastic Next.js conf talk - "So You Think You Can Build A Dropdown?") is basically styled-components on steroids. It does all that styled-components does, and more, and better.
- Stitches takes full advantage of the "JS" in "CSS-in-JS".
In my eyes, aside from theming, styled-components did little to use the JavaScript capabilities. Stitches, on the other hand, goes full throttle on typing, which makes it amazingly simple to create fully-typed component variants:
import { styled } from "@stitches/react";
const Button = styled("button", {
padding: "1rem",
borderRadius: "8px",
cursor: "pointer",
fontWeight: "bold",
fontSize: "1rem",
variants: {
color: {
primary: {
background-color: "goldenrod"
},
secondary: {
background-color: "gainsboro"
}
}
}
});
//
return (
<Button color="primary">Primary</Button>
)

- Stitches brings the best of both worlds: utility vs. components
Stitches responds flawlessly to the current trends of styling.
- it satisfies the need to create reusable, component-agnostic utility functions with its
utils
entry in the config:
import { createStitches } from "@stitches/react";
const { styled } = createStitches({
theme: {
// ...
},
utils: {
columnGap: (gap: number) => ({
flexDirection: "column",
gap: `var(--space-${gap})`,
}),
rowGap: (gap: number) => ({
flexDirection: "row",
gap: `var(--space-${gap})`,
}),
},
});
// ...
- while maintaining their core API component-centric:
// ...
const Flex = styled("div", {
display: "flex",
rowGap: 2,
});
- Stitches comes with a healthy pack of solutions to everyday problems.
Are you tired of creating your own styled-components utilities for common issues, such as media-queries? Stitches got you!
import { createStitches } from "@stitches/react";
// ...
const { styled } = createStitches({
media: {
bp1: "(min-width: 376px)",
bp2: "(min-width: 768px)",
bp3: "(min-width: 1024px)",
},
});
// ...
return (
<Flex spacing={{ "@initial": "column", "@bp1": "row" }}>{/* ... */}</Flex>
);
I haven't tested Stitches in a more demanding environment, but I definitely intend to. As far as I am concerned, the barrier to switch from styled-components is very low, and the results are splendid. I definitely recommend all of you to check it out!