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: npmjs.com/package/@sitecore/blok-theme

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

Dev docs

Internal docs for dev teams consuming Blok.

Coding guidelines

Dos and don’ts when coding with Blok.

How to contribute

Find out how you can help improve Blok.

Contact

Frank Grinaert

Principal Product Designer

frank.grinaert@sitecore.com