Integrating Sitecore Blok for Pages Editor Messages (Page Alerts)

Why this matters

Improving the authoring experience in Sitecore Pages is one of important enhancements you can make in a composable build. Even when your rendering and layout are perfect, content authors still run into the same challenges:

• “What is this component for?”
• “Which fields are required?”
• “How many placeholder components should I add to keep design consistent?”
• “Why does this look broken in preview?”

A simple solution that adds huge value is page editor messages / alerts: small guidance blocks that show inside the Pages editor to help the author understand how to use a component correctly.

The challenge is that these messages typically need to be implemented in your frontend application—meaning you need a UI solution for consistent alert styling, tone, and spacing.

That’s where Sitecore Blok can help.

What is Sitecore Blok?

Sitecore Blok is a UI component library designed to keep Sitecore experiences visually consistent. In other words, it’s Sitecore’s design system: a set of building blocks that make it easier to build interfaces that match Sitecore’s product design language.

It’s commonly targeted toward Sitecore Marketplace apps and extensions, where consistency with Sitecore UI is especially important. But Blok is useful beyond Marketplace apps—especially for improving authoring UX inside Sitecore products like Pages.

Blok is built on a modern UI stack:

• Tailwind CSS
• shadcn/ui patterns
• Tailwind + CSS variables

Now that it’s publicly available, teams can easily adopt it to build interfaces that look and feel “Sitecore-native” without recreating patterns manually.

Using Blok for Sitecore Pages editor alerts

When you add editor guidance into Pages (alerts, messages, tips, warnings), you want it to look intentional—not like a custom one-off banner.

Blok provides components like Alert, which fits perfectly for:

• “This component requires an image and a headline.”
• “This component is hidden until you add at least 3 items.”
• “This section is intended for promotional content only.”
• “Avoid using more than 120 characters here.”

The issue

These alerts must be implemented in your frontend application (for example your Next.js / React rendering app). So the moment you introduce Blok, the decision becomes:

• Do we adopt Blok UI components for editor-only messaging?
• And if yes… how do we avoid Blok styles interfering with our existing Tailwind setup?

Pros and Cons

Pros

• Straightforward if you already use Tailwind
  Since Blok is Tailwind-based, adoption is quite direct in Tailwind projects.
• Better authoring experience
  You can use Blok components to create polished editor guidance messages directly inside Pages.
• Consistent UI language
  Your authoring UI patterns can align with Sitecore’s design system, which is especially helpful when building internal tools and author-facing experiences.

Cons

• Global CSS variables may affect your project
  Blok relies on global root-level variables generated into an editing.css file.
• No clean isolation of editing.css
  There is no built-in way to isolate the import of editing.css because it defines global :root variables used by Blok. That means you must take care to override variables or scope usage appropriately to ensure it doesn’t unexpectedly impact your existing UI.

This doesn’t mean Blok is a bad idea—it just means the integration needs to be deliberate.

Setup: integrating Blok (shadcn + Tailwind approach)

1) Initialize shadcn

1npx shadcn@latest init
Copy

2) Update your components.json

1{
2  "$schema": "https://ui.shadcn.com/schema.json",
3  "style": "new-york",
4  "rsc": true,
5  "tsx": true,
6  "tailwind": {
7    "config": "tailwind.config.js",
8    "css": "src/assets/editing.css",
9    "baseColor": "neutral",
10    "cssVariables": true,
11    "prefix": ""
12  },
13  "iconLibrary": "lucide",
14  "aliases": {
15    "components": "scblok/components",
16    "utils": "scblok/lib/utils",
17    "ui": "scblok/components/ui",
18    "lib": "scblok/lib",
19    "hooks": "scblok/hooks"
20  },
21  "registries": {}
22}
Copy

Why the aliases matter

You can modify the aliases to point to a dedicated scblok folder so the Blok-related components stay isolated from your main /src components. This helps keep separation clear:

• your application components remain in src/...
• Blok + shadcn components remain in scblok/...

3) Use editing.css instead of main.css

Notice that instead of using main.css, we’re switching to editing.css (you mentioned editing.scss—same idea; the key is keeping a separate editing stylesheet for editor-only styles).

This separation makes it easier to keep Blok-related variables out of your main styling pipeline.

4) Update editing.css

In editing.css:

Remove all Tailwind imports
This file should not pull Tailwind itself. It should only keep the root variable definitions needed by Blok.

In practice, editing.css becomes the place where you keep only the :root variable changes that Blok generates when you import a component.

5) Update main.css

In main.css, ensure Tailwind is imported first, then import editing.css right after.

1/* 1. Import Tailwind CSS core */
2@import "tailwindcss";
3@import "./editing.css";
4/* 2. Add your Tailwind Overrides */
Copy

Important: After the Tailwind import, add editing.css so the Blok variables and editor styling are layered appropriately.

Adding a Blok component (Alert example)

Now you can import a Blok component you want to use for Pages editor messaging.

For example, to add the Alert component:

1npx shadcn@latest add https://blok.sitecore.com/r/alert.json
Copy

This brings in the alert component definition so you can use it directly in your editor UI.

Using the Alert component for Pages messages

Once added, you can render the Blok Alert inside the editor experience to guide authors.

Typical use cases:

• component configuration instructions
• content requirements
• warnings for missing data
• best practices / tips

At this point you can include your screenshot showing the alert rendered in Pages, and describe how it appears in context.

Final thoughts

Sitecore Blok is positioned heavily toward Marketplace apps, but it can also be a strong tool for improving the authoring experience—especially when you need editor-friendly UI patterns like messages and alerts.

If you’re already in a Tailwind-based stack, it’s a practical and modern option. Just be aware of the styling considerations:

• Blok uses global CSS variables
• you’ll likely need to override or carefully manage them
• keeping an editing.css file focused only on variables is a clean approach

If this fits your team’s needs, Blok can become an easy way to add polished, consistent guidance to Sitecore Pages—helping authors succeed and reducing mistakes before they happen.