Framework agnostic sx prop?

[ghost]

Hi! I was wondering if Theme UI has an option that doesn't require React? Emotion has @emotion/css, is there something like @theme-ui/sx that's framework agnostic?

[hasparus]

Getting jsx pragma working with Preact should be possible, but if you're not using React-like library or you want to whip up your own sx prop @theme-ui/css should give you everything you need.

The layers of Theme UI libraries look more or less like this:

• @theme-ui/css contains all "core logic".
• @theme-ui/core introduces jsx function for React and a simple ThemeProvider.
  @theme-ui/theme-provideruses@theme-ui/color-modesand@mdx-js/react` to add color modes and styling MDX
• theme-ui reexports everything you need from aforementioned libraries and @theme-ui/components for a batteries-included experience.

If you're interested in zero-runtime / low-JavaScript solutions, you should be able to use @theme-ui/tailwind to translate your Theme UI theme object to a Tailwind config — a nice choice if you use Theme UI for your app but you want to make your landing page extra light static HTML.

[ghost]

Thank you! This is a great explanation of everything!

[hasparus]

Hey @austin1647, I've added more docs about @theme-ui/css with a basic usage example.

https://theme-ui-git-docs-theme-provider-earlier-systemui.vercel.app/packages/css/

Do you think we should document something more that would be useful for your use case?

[ghost]

That looks clear enough! I'm using it to create a design system with Stencil & it looks like it should work perfectly!