Introducing Sitecore Blok

What is Sitecore Blok?

Blok is Sitecore's product design system. It's a collection of reusable components, guided by clear standards, that can be assembled together to build a number of different applications. Blok is the UI framework and style guide we use to build applications like Content Hub ONE and even the Sitecore Portal. It's publicly available, so that anyone can easily build software in the Sitecore design language.

Blok is an addition to Chakra UI, a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. With Blok these components are styled in the Sitecore design language.

How I use Blok

One of the things I am responsible for within Sitecore is the Developer Portal. The Developer Portal is the place to go for all Sitecore developers. It's the place where you can find all the documentation, guides, and other resources you need to build Sitecore solutions. The Developer Portal was originally built with Next.js and Tailwind CSS. This worked great, but it was a lot of work to maintain and make sure it was consistent with the Sitecore design language. When Blok was released publicly it made sense for us to leverage it. This way we could make the Developer Portal more consistent with the Sitecore design language and any future updates to Blok would be automatically applied to the Developer Portal.

Before migrating the complete project I started out prototyping the most important components we use in the Developer Portal. To do that I created a new Next.js project and installed Blok. I then started to create the components we use in the Developer Portal. This way I could test the components and make sure they worked as expected. Once I was happy with the results I started to migrate the complete Developer Portal to Blok. The Developer Portal is now more consistent with the Sitecore design language and it's easier to maintain.

Getting started

The Blok website provides detailed intructions on how to get started. You can find them here. But if you are looking for a quicker way to get setup you can use the template I use(d), which is based on Next.js 13. Simply run the following command to get started:

npx create-next-app -e https://github.com/markvanaalst/blok-starter-next
# or
yarn create-next-app -e https://github.com/markvanaalst/blok-starter-next
# or
pnpm create-next-app -e https://github.com/markvanaalst/blok-starter-next

This will create a new Next.js project with Blok already setup. You can find more information about this template on GitHub

Once everything is installed you should be able to run the following command to start the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Which would result in this screen:

Obviously this is just a single page with a single component. But it shows you how easy it is to get started with Blok. While migrating the Developer Portal to Blok I was able to rebuild all of the Developer Portal component using Chakra UI fairly simple . I only had to make some minor changes to make sure they were consistent with the Sitecore design language. This template helped me get a clean setup quickly and maybe it will help you as well.

More examples

If you are looking for some examples of using Blok please have a look here. This site is a collection of examples of how to use Blok. It's my personal repository of Blok examples. I use it to test new components and to see how they work on their own. It's not complete or definitive and I will add more examples over time. If you have any suggestions or feedback please let me know. You can find the code for this website in my GitHub repository.

Thanks