WebBlocks UI

HTML-first interfaces that people and AI can read

A source-visible UI system built from explicit patterns, design tokens and component contracts without making a framework runtime the baseline.

Discuss WebBlocks UI

fklavye.net WebBlocks Laravel ve AI odaklı ürün ekosistemi

fklavye.net · web services

One product, shared foundations

WebBlocks UI is developed with reusable interface, publishing and operating patterns inside a coherent product family.

Aktif fklavye.net ürünleri için görsel vitrin

Product in practice

From interface to daily operation

A focused product surface turns explicit decisions into software that stays clear, maintainable and ready to evolve.

Watch: Why WebBlocks UI (Episode 01)

A 90-second walkthrough of the six-layer model, live wb-* code demos, and real shipped patterns. Draft cut — official YouTube upload coming soon.

Core capabilities

A practical UI foundation with explicit rules

WebBlocks UI keeps interface structure, visual decisions and component behaviour understandable in the source.

HTML-first patterns

Patterns begin with semantic HTML that can be inspected, copied and adapted without reconstructing a hidden component tree.

Design tokens

Explicit tokens coordinate colour, spacing, typography, surfaces and interaction states across product interfaces.

Component contracts

Components expose clear structure and expected behaviour so developers and operator tools can use them consistently.

No framework runtime baseline

Core UI patterns do not require an application framework runtime or an npm build chain as the default starting condition.

Technical approach

Source-visible UI as a product discipline

The system favours native web foundations, progressive enhancement and documentation that remains close to the patterns it describes.

Native web foundations

The browser platform provides the base layer, while utilities and components add a consistent product vocabulary.

Progressive enhancement

Interactive behaviour is layered onto usable markup instead of becoming a prerequisite for understanding the interface.

AI-readable contracts

Source-visible structure and explicit conventions make interfaces easier for AI agents and operator tooling to inspect and modify safely.

Real product interface

A UI system that documents itself

The current WebBlocks UI documentation, rendered entirely with shipped package assets, primitives, patterns and built-in JavaScript hooks.

Current WebBlocks UI documentation with navigation for foundation, layout, primitives, icons, patterns, utilities, JavaScript and playground. — WebBlocks UI documentation home showing the package-only pattern system.

Current status

In active product development

WebBlocks UI is an active product. The documentation surface above is rendered by the current package itself; public patterns and examples will continue to expand with stable releases.

Ask about WebBlocks UI

Clear operating boundary

Requirements and delivery status

What the current package needs, what remains optional and how access is handled today.

HTML-first, no framework runtime

Use standard HTML with the shipped CSS. Icons and the interaction runtime are optional; there is no Node, npm or framework dependency for consumption.

Pin the release you ship

Applications should consume a deliberate package or CDN version and keep product-specific content and branding in the host project.

Documentation-led adoption

The current documentation and playground are the source-visible adoption surfaces. Contact fklavye.net for integration or product questions.