Introduction

LoamUI is modern UI primitives for agent-assisted developers: contextual tokens, element styles and React components, built on Google's Modern Web Guidance, for quickly building bespoke UIs that are accessible, adaptable and fast.

Three primitives

LoamUI provides three primitives and an agent skill for building interfaces for your product. All three primitives ship in one package, with a shared stylesheet that establishes their cascade order:

• Tokens. A handful of semantic decisions (four hues, eight neutrals, fluid scales); everything else is derived by recipe and audited in CI.
• Element styles. Enhanced default styles for native HTML, page-wide: responsive, accessible, and respecting the reader's light or dark preference. Plain markup is presentable before any component appears.
• Components. 48 composable React components. A region declares its meaning and the components inside adapt. Component references document their APIs, including intrinsic sizing for Badge, Loader, Progress and Meter.

The recipes are product-specific compositions of the primitives: heroes, timelines, carousels and other patterns to study and adapt. Building your own recipes explains how to choose a pattern and build it for your content.

Two pillars

The ideas that hold the primitives together. Each is grounded in a reference and enforced somewhere, by the cascade, a lint rule, a CI gate, or review.

1. Modern. Real elements carry the semantics and plain, static CSS carries the styling: no CSS-in-JS, no styling engine. @layer for order, @scope for encapsulation, light-dark() and container queries for adaptation. Underneath both sits contextualism, the paradigm shift: a region declares what it means (--loam-context) and the tokens, element styles and components inside all adapt. Component references explain the public APIs and their exceptions.
2. Accessible. Semantic HTML, managed focus, keyboard support and the reader's preferences as the baseline, distilled from the GOV.UK and Polaris design systems and running through all three primitives.

Quality checks provide evidence for these principles. LoamUI's CI runs contrast audits, automated accessibility and interaction tests, and CSS linting against the library and examples covered by those checks.

An agent's work needs checking in your application too. The skill guides it to run your project's checks and review the new composition's layout, keyboard behaviour and application integration. Passing library tests does not verify your content, custom theme or generated interface. Expect the agent to report what passed, what failed and what remains unverified; Build with the skill explains the workflow.

Get started

Set up a React framework, load LoamUI's three primitives, and check your first interface. The installation guide covers Next.js App Router and TanStack Start, then shows you how to add the agent skill.

Build with the skill

The package provides the UI primitives; the skill teaches your agent how to compose them for your product. Once your application is set up, follow Build with the skill to install it, write your first prompt and check the result. The recipes provide complete examples to copy or adapt.

Next steps

• Installation: framework guides for Next.js and TanStack Start.
• Build with the skill: create and refine your first interface.
• Tokens: the token surface, and the theming that falls out of it.
• Contextualism: how regions shape colour, size and layout.
• Building your own recipes: build a hero from the primitives.