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
// 3. Pass the custom theme to SaasProvider
function App() {
return <SaasProvider theme={theme}>{children}</SaasProvider>

Was this helpful?