best styling DX for component libraries with design tokens

This page summarizes the projects mentioned and recommended in the original post on reddit.com/r/reactjs

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • SurveyJS - Extensible JavaScript Form Builder Libraries
  • InfluxDB - Access the most powerful time series database as a service
  • vanilla-extract

    Zero-runtime Stylesheets-in-TypeScript

    curious why most libraries today that buys into this uses emotion over styled-components and has anyone attempted trying to build their own library that make uses of design-tokens. some newer css-in-js libraries like stitches or vanilla-extract or xstyled but they doesn't seem as popular.

  • theme-ui

    Build consistent, themeable React apps based on constraint-based design principles

    I am a huge fan of design tokens which is popularized by styled-system (unmaintained?) and theme-ui Interested in finding out how to achieve the best DX for building a new design system.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • styled-system

    ⬢ Style props for rapid UI development

    I am a huge fan of design tokens which is popularized by styled-system (unmaintained?) and theme-ui Interested in finding out how to achieve the best DX for building a new design system.

  • stitches

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

    curious why most libraries today that buys into this uses emotion over styled-components and has anyone attempted trying to build their own library that make uses of design-tokens. some newer css-in-js libraries like stitches or vanilla-extract or xstyled but they doesn't seem as popular.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts