Using Saas UI in Vite

Install dependencies

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

Setup provider

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

This provider composes the following:

• SuiProvider from @saas-ui/react for the styling system

import React from 'react'

import { SuiProvider, defaultSystem } from '@saas-ui/react'
import ReactDOM from 'react-dom/client'

import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <SuiProvider value={defaultSystem}>
      <App />
    </SuiProvider>
  </React.StrictMode>,
)

Update tsconfig

If you're using TypeScript, in the tsconfig.app.json file, make sure the compilerOptions includes the following:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "skipLibCheck": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

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-paths

Update 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()],
})

Enjoy!

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

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

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