HTML stays HTML
WebBlocks does not require framework wrappers to be useful. You write explicit markup and attach shipped classes.
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.
Source-visible UI system
WebBlocks UI - UI building blocks for humans and AI.
WebBlocks UI is a primitive-driven, pattern-oriented UI library for admin panels, SaaS screens, CMS surfaces, and documentation pages. The current architecture is explicit: foundation, utilities, layout, primitives, patterns, and icons.
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
Live HTML workflow
Open the Playground when you want to test WebBlocks HTML live.
Write plain HTML, preview it with the real WebBlocks CSS, icons, and JavaScript, and quickly validate AI-generated or hand-written snippets without leaving the docs surface.
Read the system in the right order
Getting Started
Use this page first if you need the shortest correct setup path for a real project.
Architecture
Use this page when you need to understand where tokens, layout, primitives, patterns, and icons belong.
Foundation
Use this page for root theme attributes, dark mode, presets, typography defaults, spacing tokens, and raw element styling.
Layout
Use this page for wb-container, wb-grid, wb-row, navbar, sidebar, and page-shell structure.
Primitives
Use this page to inspect the actual shipped controls, surfaces, forms, and interaction shells.
Icons
Use this page when you need the shipped icon class names, alias behavior, and the class-based <i> icon path.
Patterns
Use this page when the question is about page type, hierarchy, or composition rather than a single primitive.
Playground
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
Use this page for spacing helpers, text sizing, color utilities, visibility helpers, and final composition adjustments.
JavaScript
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
Use this when the page is application-heavy and needs navigation, metrics, row actions, and scan-friendly data.
Admin settings
Use this when the page is driven by grouped settings, destructive actions, and slower form workflows.
Auth login
Use this when the screen should stay narrow, quiet, and centered around a single form task.
Public home
Use this when the page is marketing-led and needs calmer content flow instead of admin density.
Content shell
Use this when the page needs structure, references, and readable progression rather than product chrome.
Useful tools while you build
Core principles
Pattern-first workflow
Start from the page job, then inspect the surfaces and primitives used by that pattern, then refine with utilities.
Small correct layers
Tokens stay in foundation, structure stays in layout, controls stay in primitives, framed content regions stay in surfaces, and full screens stay in patterns.