Using Saas in Remix

Install dependencies

npm i @saas-ui/react@next @chakra-ui/react @emotion/react next-themes

Setup emotion cache

Using snippets from the Remix sandbox, you can add the emotion cache to your application.

Emotion cache snippet

Setup root

Wrap your application with the Provider component at the root of your application.

This provider composes the following:

• SaasProvider from @chakra-ui/react for the styling system
• ThemeProvider from next-themes for color mode

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { SuiProvider, defaultSystem } from "@saas-ui/react"
import { ThemeProvider } from "next-themes"

export default function App() {
  return (
    <SuiProvider value={defaultSystem}>
      <ThemeProvider attribute="class" disableTransitionOnChange>
        <Outlet />
      </ThemeProvider>
    </SuiProvider>
  )
}

Update tsconfig

If you're using TypeScript, you need to update the compilerOptions in the tsconfig file to include the following options:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true
  }
}

Enjoy!

When the power of the snippets and the primitive components from Saas UI, you can build your UI faster.

import { HStack } from '@saas-ui/react'
import { Button } from '@saas-ui/react'

const Demo = () => {
  return (
    <HStack>
      <Button>Click me</Button>
      <Button>Click me</Button>
    </HStack>
  )
}