Vite

A guide for installing Saas UI with vitejs projects

1. Installation#

In your Vite React project, install Chakra UI by running either of the following:

npm i @saas-ui/react @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

2. Provider Setup#

After installing Saas UI, you need to set up the SaasProvider at the root of your application.

Go to the src directory and inside main.jsx or main.tsx, wrap SaasProvider around App:

import { SaasProvider } from '@saas-ui/react'
import * as ReactDOM from 'react-dom/client'


const rootElement = document.getElementById('root')
ReactDOM.createRoot(rootElement).render(
  <React.StrictMode>
    <SaasProvider>
      <App />
    </SaasProvider>
  </React.StrictMode>
)

3. Customizing Theme#

If you intend to customise the default theme object to match your design requirements, you can extend the theme from @chakra-ui/react.

Chakra UI provides an extendTheme function that deep merges the default theme with your customizations.

// 1. Import the extendTheme function
import { extendTheme } from '@chakra-ui/react'


// 2. Import the Saas UI theme
import { SaasProvider, theme as baseTheme } from '@saas-ui/react'


// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: '#1a365d',
    800: '#153e75',
    700: '#2a69ac',
  },
}


const theme = extendTheme({ colors }, baseTheme)


// 3. Pass the `theme` prop to the `SaasProvider`
function App() {
  return (
    <SaasProvider theme={theme}>
      <App />
    </SaasProvider>
  )
}

⚡Quick tip: In cases where hot reload doesn't work, first check to make sure you're using the latest version of Vite. If hot reload issue persists, use this workaround in your vite.config.js or vite.config.ts file:

server: {
    watch: {
      usePolling: true,
    },

Now, your vite.config.js or vite.config.ts should now look like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    watch: {
      usePolling: true,
    },
  },
})

Notes on TypeScript 🚨#

Please note that when adding Chakra UI to a TypeScript project, a minimum TypeScript version of 4.1.0 is required.

Was this helpful?