A pure WebBlocks UI site about WebBlocks UI

This demo explains the project, the layer model, shipped primitives, patterns, and JavaScript behavior using only package assets and shipped wb-* classes.

Package-only No custom CSS No custom JS

What this page is proving

WebBlocks UI is capable of documenting itself without a separate presentation layer. This guide does not add helper CSS, utility scripts, or invented classes.

What ships with the package

Architecture layers

6

Foundation, utilities, layout, primitives, patterns, icons

Dependencies

0

No framework requirement for the package itself

JavaScript

14+

Theme, overlays, navigation, feedback, and disclosure modules

Icons

173

Class-based mask-image icon usage

Read the system in the right order

Getting Started Includes, root attributes, first workflow

Use this page first if you need the shortest correct setup path for a real project.

Architecture The six-layer model

Use this page when you need to understand where tokens, layout, primitives, patterns, and icons belong.

Foundation Tokens, headings, theme axes

Use this page for root theme attributes, dark mode, presets, typography defaults, spacing tokens, and raw element styling.

Layout Containers, grids, shells

Use this page for wb-container, wb-grid, wb-row, navbar, sidebar, and page-shell structure.

Primitives Shipped building blocks

Use this page to inspect the actual shipped controls, surfaces, forms, and interaction shells.

Icons Mask-image class reference

Use this page when you need the shipped icon class names, alias behavior, and the class-based <i> icon path.

Patterns Screen-level compositions

Use this page when the question is about page type, hierarchy, or composition rather than a single primitive.

Playground HTML-only live preview tool

Use this tool to paste plain HTML, render it with the real WebBlocks UI assets, and quickly validate AI-generated or hand-written snippets.

Utilities Spacing, text, alignment helpers

Use this page for spacing helpers, text sizing, color utilities, visibility helpers, and final composition adjustments.

JavaScript Data hooks and public APIs

Use this page when the interaction model matters and you need the correct trigger pattern or public module name.

Start from a real shipped example

When the page job is already clear, copying the nearest pattern example from this guide is safer than rebuilding the screen from memory. Start with the whole structure, replace the content, then trim aggressively.

Admin dashboard Sidebar, topbar, stats, tables

Use this when the page is application-heavy and needs navigation, metrics, row actions, and scan-friendly data.

Admin settings Longer forms and sectioned actions

Use this when the page is driven by grouped settings, destructive actions, and slower form workflows.

Auth login Focused entry flow

Use this when the screen should stay narrow, quiet, and centered around a single form task.

Public home Hero rhythm and promotional surfaces

Use this when the page is marketing-led and needs calmer content flow instead of admin density.

Content shell Docs, onboarding, and text-first flows

Use this when the page needs structure, references, and readable progression rather than product chrome.