OpenComponents by UXFront

Changelog

Everything new in Open Components, from new guidelines to new components, and what each one means for you and your agents.

Contracts

A schema for contracts

Contracts give agents every requirement for a component in one YAML file, so a field that's missing or misspelled leads them astray without a word. They now all follow one published JSON Schema, which catches those mistakes before anyone relies on the contract.

New

  • Every contract names the schema on its first line, so editors that use the YAML language server check it as you type.
  • The schema covers components and conventions alike, so you can validate the contracts you write for your own components too.
  • We validate every contract on this site against it on every change, so the ones we publish always pass.
Read about contracts
Components

The Button

Buttons are the most common interactive component in any interface, and also the one we most often get wrong. Our first component page walks you through building one the right way, and every component page after it will follow the same structure.

New

  • It covers how a button looks, how it behaves for every person and every input, how developers work with it and how agents can read and verify it.
  • Every example is live, and its code comes in React, Vue, Svelte, Angular, Solid, Astro and Vanilla.
  • A checklist, a contract for agents and a tested reference implementation help you hold your own buttons to the standard.
Read the Button page
Foundations

Design Tokens and token paths

Every component reads its colours, sizes and spacing from CSS variables, and their names are all that people, tools and agents have to go on. Our first Foundations page shows you how to name them, so that everyone reads them the same way.

New

  • Token paths, like --color--primary, give every token a name that can only be read one way.
  • Every component reads the same theme tokens, so a new brand or a dark mode never means editing every component.
  • A Stylelint rule and a checklist let you and your agents check your tokens automatically.
Read the Design Tokens page
Copyright © 2026