Get started

To build products using Blok, you’ll need:

  1. React (v18)
  2. Chakra UI (v2) component library
  3. Blok theme package
  4. Material Design Icons

More details on some of these dependencies below.

Chakra component library

The Chakra UI v2 React component library is our foundation. To install:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

More information: Installation - Chakra UI

Blok theme package

Use our custom Blok theme to restyle the Chakra components. To install:

npm i @sitecore/blok-theme

More information:

Once Blok is installed, go to your _app.tsx file. Set theme and toastOptions as follows:

import sitecoreTheme, { toastOptions } from '@sitecore/blok-theme'<ChakraProvider theme={sitecoreTheme} toastOptions={toastOptions}>

Material Design Icons

For interface iconography, use the Material Design Icons library by Pictogrammers. To install:

npm install @mdi/jsHow to use the Icon componentHow to choose the right icon

Internal resources


Frank Grinaert

Principal Product Designer