This example features how to use theme-ui with Remix.

Since theme-ui is derived from emotion, this example shows how we can leverage Emotion's server-side-caching to enable theme-ui server side rendering.

This implementation was based off Saas-UI Remix guide.

- app/
  - styles/
    - context.tsx
    - createEmotionCache.tsx
  - entry.client.tsx
  - entry.server.tsx
  - root.tsx

1. context.tsx - Creates the server and client context.
2. createEmotionCache.ts - Create an instance of Emotion cache.
3. entry.client.tsx - Consumes the emotion cache generated by the server and creates a provider that is then passed on the the app.
4. entry.server.tsx - Create the markup with the styles injected to serve on the server response.

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/routes/_index.tsx. The page auto-updates as you edit the file.

• dev: runs your application on localhost:3000
• build: creates the production build version
• start: starts a simple server with the build production code

Theme-UI