Design layer

The default design layer for teams already building on WebBlocks.

WebBlocks UI is the default design layer for WebBlocks: token-based CSS, named layouts and components, icons, and small vanilla JS modules that stay readable in the browser and easy to ship in static or server-rendered environments.

Install the UI layer Open examples

Design language

Tokens, type, rhythm, and shells

Foundation tokens, component patterns, and layout shells are designed to feel deliberate without breaking the structural clarity of WebBlocks.

Runtime model

Small JavaScript, explicit hooks

Behavior stays opt-in and named so dropdowns, overlays, tabs, and other interactions remain easy to trace in source.

Best fit

Static and server-rendered products

Blade, Twig, Django templates, ERB, and plain HTML teams can use the same UI layer without adopting a separate rendering framework.

WebBlocks UI is not separate from the core. It is the default expression of it.

Use this layer when the structural model is already clear and the next step is a coherent visual system, named interaction patterns, and reusable page shells.

Install the assets Add the CSS, JS, and icon files with the documented include pattern.

Start from examples Inspect complete pages to see how the layer behaves in real compositions.

Carry the same language into Craft The same presentation model can continue into WebBlocks Craft when a CMS layer is needed.