https://stitches.dev

Stitches — CSS-in-JS with near-zero runtimeCSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience, by WorkOS.Stitches — CSS-in-JS with near-zero runtimeStitches homepageDocsBlogGitHubDiscordStitches is no longer maintained Read more Style your components with confidenceCSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.DocumentationGitHubnpm install @stitches/reactPerformantStitches avoids unnecessary prop interpolations at runtime, making it more performant than other styling libraries.Feature-richPacked full of useful features like theming, smart tokens, css prop, as prop, utils, and a fully-typed API.Best-in-class DXStitches has a fully-typed API, to minimize the learning curve, and provide the best possible developer experience.Framework-agnosticStitches has a dedicated React lib, but @stitches/core works with any framework including Vue, Svelte, and even vanilla HTML.Stats at a glanceBundle size (Core)5.9kbBundle size (React)6.1kbRuntime interpolationsZeroVariants∞VariantsDesign 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.VariantsDefine multiple component variants.Compound VariantsApply styles only when multiple variants match.Default VariantsSet a value as the default for each variant.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', } });ThemingDark 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.TokensDefine tokens with our built-in solution.Token aliasesReference pre-existing tokens to define semantic aliases.ThemesOverride tokens to define multiple themes.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', }, });TestimonialsSharing some love from the community <3EEvan Hennessy@hennessyevanOf all the libraries I’ve built design systems with: SC, emotion, xstyled, styled-system, theme-ui etc., @stitchesjs has been the most ergonomic and enjoyable. Took a look at the roadmap and it looks like it’s getting even better.GGiuseppe@giuseppegurgoneI have been maintainer of SUIT CSS, worked on design systems at scale when we still called them Styleguide, created a couple of CSS in JS libs and watched this space for a long while and @stitchesjs seems the most promising library out there.AAnna Carolina@accezrI've been using Stitches + Radix to build a base component library for our Design System and I have to say that I'm loving the development experience. Thanks to @modulz for making my life easier. The latest updates are 🔥🔥DDylan Klohr@dylanklohrThe @modulz crew IS without a DOUBT the most devoted crew I've seen. NEVER have I seen a team respond to a bug report, in a CANARY build, via a discord channel and had the issue resolved by a maintainer in < 10 minutes. 🤯 @jon_neal. MMark Dalgleish@markdalgleishListening to @peduarte talk about @stitchesjs, the penny finally dropped for me. They've designed an API that feels like it belongs in the options panel of a design tool because, of course, they're also building @modulz.RRauno Freiberg@raunofreibergBeen using @stitchesjs for a week on an actual product and I've never had such a smooth collaboration, shared vocabulary, and mutual understanding with our designer. Setting up tokens and being very systematic and constrained about the UI we build has never been easier.MMike San Román@msanromanvThis definitely feels like a step forward, not only because of the performance benefits, SSR support, etc., but the developer experience is amazing.I think I haven't been as excited about a styling lib ever.RRăzvan Pavel@razvan_pavelSomething I don't see very often in any tech or product reading: developer & debug experience! It's this focus on using tech as a tool and putting humans first that makes products successful. @stitchesjs will probably be around for a while.�🆅🅸🅽🅲🅴@1stfloorThe cool thing for me as a designer was seeing the systematic approach to using design tokens at a level I could understand 😂 I believe the gap between design and development is finally narrowing and solutions like Stitches and Modulz speed up this process.JJoe Bell 🔔@joebell_Stitches pretty much ticks everything off on my CSS-in-JS wish list. I couldn't go back to writing CSS without it.GGianmarco Simone ✨@ggsimmI'm a @stitchesjs convert now. This is just a superior way of writing css-in-js, and I'm excited to see where it goes.CChris@chrishbrown55This might be the best implementation of CSS-in-JS yet. It does what CSS-in-JS has always failed to do in the past: fix all the problems that CSS had already solved (and Sass).KKyle Holmberg@kylemh_I haven’t been excited by tech tooling since Next.js 2 years ago.I’m feeling that way about @stitchesjs now.KKevin Wolf@elkevinwolfI am really impressed with Stitches by @modulz . Creating a design system with strong TypeScript support and ease of extension has never been easier. Great job @peduarte and team! 🚀JJimmy Cleveland@JimmyDClevelandI haven't been much of a fan of js object syntax for css in the past, but I've been trying out @stitchesjs on a side project and it's quite fun so far.The performance promises and type-hinting make it really appealing right away. Good docs as well.HHyeseong Kim@KrComet@stitchesjs is the best. Now I'm pretty sure every CSS in JS libs should have a (static) variants API as a 1st-class citizen.CCristiano Rastelli@areawebI must say, really impressed by how neat and well-thought is the API of @stitchesjs .JJuan Di Toro@ditorojuanfThis is 🔥 from the docs you can already see how helpful this is for designing component libraries with great system design definitions.றறதீஸ் / raðiːs / rathes@rswebdesignerOne of the reasons why I really love @stitchesjs: This whole skeleton component took me like 5 minutes? Including all variants. In other CSS-in-JS solutions, this would take ages 😅FFabio Vedovelli@vedovelli74Eu tenho faro para identificar tecnologias que se popularizaram: gravei sobre Laravel em 2011, sobre Vue em 2015 e Tailwind em 2020.Algo me diz que @stitchesjs: estará no mesmo nível de popularidade em breve!Smart tokensSave 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.Smart token mappingTokens automatically map to the most appropriate scale.Specific token mappingOverride the default and map to any scale.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', });UtilsTurbocharge 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.Property shorthandsAbbreviate CSS properties.Property bundlesApply multiple CSS properties simultaneously.Simplify syntaxSimplify a tricky CSS syntax.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})`, }), }, });FeaturesA fully-featured styling library.PerformantStitches avoids unnecessary prop interpolations at runtime, making it more performant than other styling libraries.Server-side renderingStitches supports cross-browser server-side rendering, even for responsive styles and variants.Developer experienceWith a fully-typed API, token-aware properties, and custom utils, Stitches offers a fun and intuitive DX.Critical Path CSSStitches only injects the styles which are actually used, so your users don't download unnecessary CSS.Override component tagsA polymorphic as prop is included in components returned from the styled function.Override component stylesStitches provides a css prop, which allows style overrides to be applied in the consumption layer.CommunityGet involved in our community. Everyone is welcome!TwitterFor announcements, blog posts, and general Stitches tips.DiscordTo get involved in the community, ask questions, and share tips.GitHubTo file issues, request features, and contribute, check out our GitHub.Stitches homepageStitches is a project by WorkOS.OverviewIntroductionTutorialsAPIFAQDocsInstallationStylingVariantsConfigurationCommunityBlogGitHubTwitterDiscordenen1772915281https://stitches.dev

ތިޔަ ސައިޓް އެޑިޓް ކުރަންވީތަ؟

ތިބާ ކީއްކުރަނީ؟