Using Saas UI with TanStack
A guide for installing Saas UI with TanStack projects
Templates
Use one of the following templates to get started quickly. The templates are configured correctly to use Saas UI.
Installation
The minimum node version required is Node.20.x
1
Install dependencies
npm i @saas-ui/react@next @chakra-ui/react @emotion/react next-themes2
Setup provider
Wrap your application with the SuiProvider component at the root of your
application.
This provider composes the following:
SuiProviderfrom@saas-ui/reactfor the styling systemThemeProviderfromnext-themesfor color mode
src/routes/__root.tsx
import React from 'react'
import { SuiProvider, defaultSystem } from '@saas-ui/react'
import { ThemeProvider } from 'next-themes'
import ReactDOM from 'react-dom/client'
...
function RootDocument({ children }: { children: React.ReactNode }) {
return (
<html>
<head>
<HeadContent />
</head>
<SuiProvider value={defaultSystem}>
<ThemeProvider attribute="class" disableTransitionOnChange>
...
</ThemeProvider>
</SuiProvider>
</html>
)
}3
Enjoy!
With 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>
)
}