CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
Stitches avoids unnecessary prop interpolations at runtime, making it more performant than other styling libraries.
Packed full of useful features like theming, smart tokens, css
prop, as
prop, utils, and a fully-typed API.
Stitches has a fully-typed API, to minimize the learning curve, and provide the best possible developer experience.
Stitches has a dedicated React lib, but @stitches/core
works with any framework including Vue, Svelte, and even vanilla HTML.
Variants
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
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%)',
// token aliases
background: '$gray100',
line: '$gray200',
text: '$gray400',
accent: '$violet300',
}
}
});
const darkTheme = createTheme({
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 { 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%)',
// token aliases
background: '$gray100',
line: '$gray200',
text: '$gray400',
accent: '$violet300',
}
}
});
const darkTheme = createTheme({
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',
},
});
Sharing some love from the community <3
Smart tokens
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
export const { styled, css } = createStitches({
utils: {
pt: (value) => ({
paddingTop: value,
}),
pr: (value) => ({
paddingRight: value,
}),
pb: (value) => ({
paddingBottom: value,
}),
pl: (value) => ({
paddingLeft: value,
}),
px: (value) => ({
paddingLeft: value,
paddingRight: value,
}),
py: (value) => ({
paddingTop: value,
paddingBottom: value,
}),
size: (value) => ({
width: value,
height: value,
}),
linearGradient: (value) => ({
backgroundImage: `linear-gradient(${value})`,
}),
},
});
export const { styled, css } = createStitches({
utils: {
pt: (value) => ({
paddingTop: value,
}),
pr: (value) => ({
paddingRight: value,
}),
pb: (value) => ({
paddingBottom: value,
}),
pl: (value) => ({
paddingLeft: value,
}),
px: (value) => ({
paddingLeft: value,
paddingRight: value,
}),
py: (value) => ({
paddingTop: value,
paddingBottom: value,
}),
size: (value) => ({
width: value,
height: value,
}),
linearGradient: (value) => ({
backgroundImage: `linear-gradient(${value})`,
}),
},
});
A fully-featured styling library.
Stitches avoids unnecessary prop interpolations at runtime, making it more performant than other styling libraries.
Stitches supports cross-browser server-side rendering, even for responsive styles and variants.
With a fully-typed API, token-aware properties, and custom utils, Stitches offers a fun and intuitive DX.
Stitches only injects the styles which are actually used, so your users don't download unnecessary CSS.
A polymorphic as
prop is included in components returned from the styled
function.
Stitches provides a css
prop, which allows style overrides to be applied in the consumption layer.
Get involved in our community. Everyone is welcome!