WebBlocks UI Documentation
Read from the inside out

The docs begin with structure, not promotion.

Start with foundations, because every other file depends on them. Then move into layouts, then components, then utilities and JavaScript. The system is intentionally ordered so you can understand how a page comes together without guessing where a behavior or token originated.

Reading order

A practical path through the system.

If you are new to the library, follow this order. It mirrors the order of the build and the way a real page is assembled.

  1. Foundation

    Read the token system, theme axes, and the rules around accent, radius, border, density, and font.

  2. Layouts

    Choose the shell first: container, dashboard, auth, settings, or content.

  3. Components

    Add the pieces the page needs: forms, tables, alerts, overlays, lists, filters, navigation.

  4. Utilities and JS

    Only then reach for spacing helpers, visibility helpers, and behavioral modules.

Map

Each document has a specific job.

The docs are easier to keep lean when every page has one responsibility. These are the main entry points.

Getting Started Install, include, and first markup
Use this when you need the first page up quickly and want the minimum correct setup.
Foundation Tokens and theme axes
Read this to understand where color, spacing, type, border, and density choices actually come from.
Layout Page shells and composition
Choose the shape of the page before choosing the details inside it.
Components Primitives grouped by function
Buttons, form controls, tables, overlays, list patterns, feedback, and richer interaction pieces.
JavaScript API Named modules and hooks
See which modules expose public APIs and which data attributes trigger behavior.
Icons Sprite and class-based usage
Pick between semantic SVG usage and fast <i> tag rendering.
Utilities Final adjustments
Small single-purpose helpers for spacing, display, border, type, visibility, and positioning.
Build model

The docs follow the build order because the build order matters.

WebBlocks is not assembled by an opaque toolchain. The final bundle is the result of an explicit file list. If a token or layout primitive appears earlier in the build, it is because later layers depend on it. 

foundation/
base/
components/
layouts/
utilities/

./build.sh
Next routes

Continue in the direction you need.

If you already know the system, you do not need to read everything in order. Jump directly to the area that matches the page you are building.

Go to Components Inputs, tables, overlays, feedback
Use this when the structure is already clear and you need the actual interface pieces.
Go to Layout Shells, containers, page rhythm
Use this when you are shaping a page or deciding how navigation and content should live together.
Open Examples Complete pages
Use this when you want to inspect a whole page instead of reading isolated reference notes.