Stitches homepage

Style your components with confidence

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

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)4.4kb
Bundle size (React)4.7kb
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

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.