Blitz JS

A guide for installing Saas UI with blitzjs projects

1. Installation#

First setup Chakra UI within your blitzjs project, simply run:

blitz install chakra-ui

This installs Chakra UI and sets up the ChakraProvider.

2. Install Saas UI#

yarn add @saas-ui/react

3. Setup SaasProvider#

Edit ap/pages/_app.tsx and replace ChakraProvider with SaasProvider

4. 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>
  )
}

To further customize components or build your own design system, the theme-tools package includes useful utilities. Install @chakra-ui/theme-tools.

Notes on TypeScript 🚨#

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