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 functionimport { extendTheme } from '@chakra-ui/react'// 2. Import the Saas UI themeimport { SaasProvider, theme as baseTheme } from '@saas-ui/react'// 2. Extend the theme to include custom colors, fonts, etcconst 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?