Using Theme UI with other Frameworks

[niklasravnsborg]

Hey there 👋

I just found this thread about a framework-agnostic sx-prop and wanted to reopen a discussion about the topic since I've also thought about using Theme UI or parts of it with another framework. I'm looking into SolidJS and Svelte in particular and have a few thoughts on this.

Knowing that Styled System could be used to implement a Theme UI clone in another framework I feel that Theme UI is uniquely positioned to make it easier working with multiple frameworks (or switching between them) while keeping a consistent design. This should be possible because themes aren't coupled to React components directly.

Making Theme UI work with another framework would require reimplementation of each component but they could still share theme constraints and logic behind style props. I'm not familiar with the theme-ui packages and architecture but if one would port the @theme-ui/core and @theme-ui/components packages to say SolidJS, the underlying themes would still be able to function and most other modules could be reused, right?

Why not use React?
There have been a lot of innovations in build systems and compilers lately that enable much faster build- and load-times, smaller bundle sizes and therefore better user experience and more efficient use of resources. Most of those innovations aren't usable (yet) with React-based ecosystems. I'm especially not satisfied with the bundle sizes of React and don't like shipping megabytes of Javascript to my users – especially for websites or blogs. Still I want to be able to use constraint-based design and themable UI because I don't want to go back to using class names and stylesheets.

Providing a universal themable API that is compatible with multiple UI-Frameworks could bring communities together and make it easier to use multiple frameworks. For example if a company would like to build their website with React/Gatsby and also wants to use Svelte to build their app, Theme UI could enable consistent styling between the app and website while providing basic components and layouting capability. Custom components that are only needed in one of the two projects, only need to be implemented once obviously.

Are my assumptions correct? Maybe somebody has thought of this before and can point me in the right direction. ☺️

[lachlanjc]

Totally! Our theme is a standard format & the @theme-ui/css package is designed to be React-agnostic so the theme provider, components, pragma etc could be reimplemented for other frameworks with the same sx prop parsing. We as the maintainers have no intentions of officially porting Theme UI to non-React, but we'd be happy to link to other implementations in docs!