Using Saas UI in Vite
A guide for installing Saas UI with Vite.js projects
Templates
Use the vite template below to get started quickly.
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/main.tsx
import React from 'react'
import { SuiProvider, defaultSystem } from '@saas-ui/react'
import { ThemeProvider } from 'next-themes'
import ReactDOM from 'react-dom/client'
import App from './App'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<SuiProvider value={defaultSystem}>
<ThemeProvider attribute="class" disableTransitionOnChange>
<App />
</ThemeProvider>
</SuiProvider>
</React.StrictMode>,
)3
Update tsconfig
If you're using TypeScript, in the tsconfig.app.json file, make sure the
compilerOptions includes the following:
tsconfig.json
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Bundler",
"skipLibCheck": true,
"paths": {
"@/*": ["./src/*"]
}
}
}4
Setup Vite Config Paths
In your project, set up a vite config path to automatically sync tsconfig with
vite using the command:
npm i -D vite-tsconfig-pathsUpdate the vite.config.ts file:
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), tsconfigPaths()],
})5
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>
)
}