const Button = styled('button', {// Edit the code!backgroundColor: 'hsl(206,100%,50%)',borderRadius: '9999px',color: 'white',fontSize: '17px',fontWeight: 500,paddingTop: '10px',paddingBottom: '10px',paddingLeft: '16px',paddingRight: '16px',textDecoration: 'none',appearance: 'none',transition: 'all 200ms ease',margin: '0px 8px',':hover': {boxShadow: '0 5px 15px rgba(0, 0, 0, .12)',transform: 'translateY(-2px)',},variants: {color: {white: {backgroundColor: 'transparent',color: 'hsl(206,10%,44%)',':hover': {backgroundColor: 'white',color: 'hsl(206,10%,5%)',},},}}});render(<div style={{ display: 'flex', justifyContent: 'center' }}><Button as="a" href="/docs/installation">Documentation</Button><Button color="white" as="a" href="https://github.com/modulz/stitches">GitHub</Button></div>);
Stitches avoids unnecessary prop interpolations at runtime, making it significantly more performant than other styling libraries.
Both @stitches/core
and @stitches/react
libraries combined weigh in at ~8.0kb gzipped.
Stitches supports cross-browser server-side rendering, even for responsive styles and variants.
Variants are a first-class citizen of Stitches, so you can design composable component APIs which are typed automatically.
Define multiple themes with CSS variables, then expose them to any part of your app.
With a fully-typed API, token-aware properties, and custom utils, Stitches provides a fun and intuitive DX.
Stitches only injects the styles which are actually used, so your users don't download unnecessary CSS.
No more specificity issues due to the atomic output. Even extended components (via the as
prop) won't contain duplicate CSS properties.
as
propIncluded in Components returned from the styled function
Stitches provides a css
prop, which allows style overrides to be applied in the consumption layer.