Stitches

The modern CSS-in-JS library with near-zero runtime.

8 followers

The modern CSS-in-JS library with near-zero runtime.

8 followers

Stitches is a fully-typed CSS-in-JS library featuring near-zero runtime, server-side rendering, multi-variant support, and a best-in-class developer experience.

Launch tags:Design Tools•Developer Tools•Tech

Launch Team

CloudflareYour next app belongs on Cloudflare Workers. Deploy for free

Promoted

(Basic) Bookmarks

Knowing the amount of effort y'all put into Modulz and everything else in this space — I'm very excited to see this launch and I'll definitely be trying it out! Could you shed some light on the mentioned interoperability? What kind of workflow can we expect from this feature going forward? Thanks and keep up the awesome work! ✌️

Report

6yr ago

Radix UI

Maker

@rauno Glad you asked :) The API will be fully interoperable with Modulz. You can literally copy/paste a Stitches component directly on a Modulz canvas, and all of the properties render in the properties panel. Then you can tweak the component in Modulz, and export to Stitches (or styled-components and emotion).

Report

6yr ago

I really like improvements this has over other CSS-in-JS libs (Looking at you Styled-Components). However, what's the reasoning behind the camelCase properties vs. kebab-case properties that we see in the current ecosystem? I personally like the syntax of traditional CSS but with the features of JS.

Report

6yr ago

Radix UI

Maker

@eugeneross That's just JS object notation. It requires extra work and code to support string syntax, so we omitted it. We'll most likely introduce a plugin soon for those who want it and don't mind the extra weight.

Report

6yr ago

?makers - - What are the main differences between your lib and linaria or astroturf? - Is the lib compatible with Gatsby?

Report

6yr ago

Polypane

The theme/token notation in Stitches looks like it's a pleasure to work with. I'm not sure I could get used to object notation for CSS but I'm definitely going to see how this works for UI in Polypane!

Report

6yr ago

Radix UI

Maker

@kilianvalkhof Cheers mate, looking forward to seeing what you come up with :)

Report

6yr ago

Webstudio

The gist is great, curious to see where this goes! Compile to Atomic CSS libraries are the hottest thing ATM and for a good reason: they produce small CSS output that grows very slowly if not at all over time. The most interesting bit probably is the built-in variants support: as I said on Twitter finally somebody took the time to find a better way to do variants and fix the forwarding props issue :) You can learn more about this here (around the end Christian talks about how variants work) https://twitter.com/christianalf...

Report

6yr ago

Radix UI

Maker

@giuseppegurgone Thanks so much Giuseppe! Thanks for all the inspiration too, and for all your work in the community.

Report

6yr ago

Radix UI

Maker

Hey all 👋 Stitches is a lightweight, performant CSS-in-JS library. Our goal is to design a more performant styling library with a focus on component architecture and developer experience. Key features include: - Performance: Stitches avoids unnecessary prop interpolations at runtime, making it significantly more performant than other styling libraries. - Server-side rendering: Stitches supports cross-browser server-side rendering, even for responsive styles and variants. - Variants: Variants are a first-class citizen, so you can design composable component APIs. - Theming: Define multiple themes with CSS variables, then expose them to any part of your app. - Specificity: Due to its atomic output, specificity issues are a thing of the past. - Developer experience: With a fully-typed API, token-aware properties, and custom utils, Stitches provides a fun and intuitive DX. - Interoperability: Stitches components support two-way compatibility with Modulz. Of course, this all comes alongside the usual benefits that most CSS-in-JS libraries provide, like critical CSS injection and vendor prefixing. Designed by the team at Modulz ✨

Report

6yr ago

Nice product. How do you differentiate from styled components ?

Report

6yr ago

Radix UI

Maker

@pranay_singh2 Thanks! - Better performance - SSR for responsive variants - First-class variant API, for better style composition - Fully-typed API for a better DX

Report

6yr ago

1 2

Reviews