Setting the Saas UI Pro theme

How to setup the Saas UI Pro theme in your project.

Configure your theme

You can find you base theme in packages/ui-theme, this is where you can customize your theme. Read more about theme customization on the Chakra UI website.

Add to existing project

If you installed Saas UI Pro into an existing project follow these steps to make sure all Pro components are styled correctly.

import { extendTheme } from '@chakra-ui/react'

// 1. Import the pro theme
import { theme as proTheme } from '@saas-ui-pro/react'

// 2. Extend your theme
const theme = extendTheme(
  {
    // your custom theme
  },
  proTheme
)

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