Theme & design system

One shared block library. Every customer site on brand.

Every customer wants a website that looks like theirs, while your engineering team wants a single codebase to maintain. ChaiBuilder separates shared React blocks from per-site Tailwind CSS design tokens, so you can skin hundreds of customer sites without code forks and let customers edit pages without breaking layouts.

Book a demo Explore all builder features

brightsmile-dental.com

--primaryradius 12px

oakhaven-realty.com

--foregroundradius 0px

Same React block, two themes

What is shared is code. What differs is data.

You never copy-paste repositories to customize a customer's site. Every customer site draws from three cleanly separated layers.

Layer 1: Shared custom React blocks

Platform-wide

Your developers build and register your vertical's blocks once (hero banners, listing grids, service cards, booking forms, testimonials). When you improve a block or fix a bug, every customer site gets the update at runtime.

Layer 2: Per-site theme & design tokens

Stored in your database

Colors (--primary, --secondary, --accent), typography, border radii, and spacing tokens are stored as data per customer site. Changing a customer's brand look takes seconds with zero rebuilds.

Layer 3: Guardrailed visual & AI editing

Customer-scoped

Customers arrange blocks, swap images, and edit copy inside the visual canvas or via the AI assistant, while your design tokens enforce consistent spacing, contrast, and responsive behavior.

Standard Tailwind CSS tokens under the hood

One source of truth per site

Define primary, secondary, muted, and destructive color tokens, heading and body font pairs, and border radii once per site; every block on every page inherits them automatically.

Re-skin without rebuilding pages

Switching a customer from one preset theme to another updates their entire website immediately without touching individual blocks.

Import and export as standard CSS

Because tokens map cleanly to Tailwind CSS variables, your designers and frontend engineers work with the exact CSS primitives they already use.

Site theme

tokens.css

ColorsFontsRadius

--primary

oklch(62% .41 257)

--secondary

oklch(92% .01 257)

--muted

oklch(96% .01 257)

--destructive

oklch(58% .22 20)

ButtonOutlineBadge

Inherited by every block

Permissions

AdminOnboarding teamCustomer

Theme & design tokensAdmins and onboarding

Page content & sectionsCustomers

Block structureLocked

Give customers freedom over content, not ways to break the layout

You decide exactly how much styling control your internal onboarding team gets versus what your end customers see.

Role-locked theme & token settings

Restrict global design token and theme edits to your internal onboarding specialists or admins while giving end customers simple content and section editing.

Scoped block controls

When your developers register a custom React block, they specify which props appear in the editor sidebar (such as headline text, CTA link, or layout variant) and lock the underlying Tailwind structure.

AI that respects your design system

Both the in-builder AI chat assistant and the opt-in Design System for Agents on the MCP server check changes against your tokens and design rules, so AI-generated sections always match the customer's brand.

Explore AI in ChaiBuilder

See how your design system runs across customer sites.

Book a 30-minute call to see how custom React blocks, Tailwind design tokens, and role-based guardrails work inside your product.

Book a demo See how data binding works