Build better products faster

Blok is Sitecore's design system. It is used for creating industry leading martech applications.
Now, it's publicly available, so that anyone can easily build software in the Sitecore product design language.

Browse primitives

Prerequisites

Make sure you have the following tools installed before proceeding:

Node.js 16+

node --version

Download

npm 10+

npm --version

Learn more

TailwindCSS

Installed & configured

Setup guide

Tip: This installation process is similar to shadcn/ui. If you're familiar with that, you'll feel right at home!

Step 1: Initialize shadcn/ui

Run the shadcn/ui initialization command in your project's root folder:

npx shadcn@latest init

During initialization, choose a base color when prompted. The CLI will then:

Automatically detect your Vite setup and Tailwind configuration.
Create a components.json configuration file.
Update your CSS with the necessary CSS variables.
Create src/lib/utils.js with utility functions.

Step 2: Install Blok components

You can now start adding the Blok components to your project.

npx shadcn@latest add https://blok.sitecore.com/r/button.json

Alternatively, you can install the Blok component registry to get access to all components.

npx shadcn@latest add https://blok.sitecore.com/r/blok-components.json

This command will install a comprehensive set of components including:

Basic UI components (Button, Card, Input, etc.)
Advanced components (Calendar, DataTable, Charts, etc.)
Layout components (Navigation, Breadcrumbs, etc.)
Form components (Select, Checkbox, Radio, etc.)

Step 3: Test your setup

Update your src/App.jsx to test the installation. Components are imported with the @/ alias:

Step 4: Run your application

Start the development server:

npm run dev

Your application is now running with functional Blok components.