Using Saas in React Router
A guide for installing Saas UI with React Router projects
Templates
Use the React Router template below to get started quickly.
Installation
Install dependencies
npm i @saas-ui/react@next @chakra-ui/react @emotion/react next-themesSetup root
Wrap your application with the Provider component at the root of your
application.
This provider composes the following:
SaasProviderfrom@chakra-ui/reactfor the styling systemThemeProviderfromnext-themesfor color mode
app/root.tsx
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:
tsconfig.json
{
"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>
)
}Known issues
You may encounter the following issues when using Saas UI with Remix:
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.This is a known issue related to extension installed in your browser. We recommend testing your application in incognito mode to see if the issue persists.
We welcome contributions to fix this issue.