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.

Was this helpful?