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

note

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>
  );
}

tip

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.

tip

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.