Ecosystem

Styled System is a low-level, framework-agnostic suite of utilities. It can be used with many different libraries, including React, Vue.js, Angular, Styled Components, Emotion, JSS, and more. While Styled System will always remain fairly low-level, there are many other libraries built on top of the core concepts and functionality included in this library.

If you're looking for a framework-agnostic utility for managing design constraints and scales within a design system, and want to build custom components with a consistent learn-once-use-anywhere API, Styled System is a perfect choice.

If you're looking for something more batteries-included or something off-the-shelf that you can start using today, consider the following libraries, which are built on top of the core Styled System.

Theme Specification

The Theme Specification (opens in a new tab) drives all the theming concepts used throughout these libraries. By conforming to this standard, theme objects created with any of the libraries above will work with the other libraries.

For ease of use I created my own package to handle and build themes, this can be found at @techstack/theme (opens in a new tab)

Other Community Libraries

If you have built a library using styled-system please let me know and i will happily add it here.