Blitz.js
1. Installation
To set up Chakra UI within your Blitz.js
project, simply run:
blitz install chakra-ui
This installs Chakra UI and sets up the ChakraProvider
.
ChakraProvider Props
Name | Type | Default | Description |
---|---|---|---|
resetCSS | boolean | true | automatically includes <CSSReset /> |
theme | Theme | @chakra-ui/theme | optional custom theme |
colorModeManager | StorageManager | localStorageManager | manager to persist a users color mode preference in |
portalZIndex | number | undefined | common z-index to use for Portal |
You're good to go with steps 1 and 2. However, if you'd love to take it a step further, check out step 3.
2. Optional Setup
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. Extend the theme to include custom colors, fonts, etc
const colors = {
brand: {
900: '#1a365d',
800: '#153e75',
700: '#2a69ac',
},
};
const theme = extendTheme({ colors });
// 3. Pass the `theme` prop to the `ChakraProvider`
function App() {
return (
<ChakraProvider theme={theme}>
<ErrorBoundary
FallbackComponent={RootErrorFallback}
resetKeys={[router.asPath]}
onReset={() => {
// This ensures the Blitz useQuery hooks will automatically refetch
// data any time you reset the error boundary
queryCache.resetErrorBoundaries();
}}
>
{getLayout(<Component {...pageProps} />)}
</ErrorBoundary>
</ChakraProvider>
);
}
To further customize components or build your own design system, the
theme-tools
package includes useful utilities. Install
@chakra-ui/theme-tools
.
Using Chakra Icons
Chakra provides a set of commonly used interface icons you can use in your project.
If you want to use the icons from Chakra UI, install @chakra-ui/icons
.
Follow this guide for customising Chakra Icons Using Chakra UI Icons.
Notes on TypeScript 🚨
Please note that when adding Chakra UI to a TypeScript project, a minimum
TypeScript version of 4.1.0
is required.