Get started
To build products using Blok, you’ll need:
- React (v18)
- Chakra UI (v2) component library
- Blok theme package
- 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-motionMore information: Installation - Chakra UI
Blok theme package
Use our custom Blok theme to restyle the Chakra components. To install:
npm i @sitecore/blok-themeMore 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 iconInternal 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
FG
Frank Grinaert
Principal Product Designer
frank.grinaert@sitecore.com