Overview
Open Components is the UXFront standard for building UI components that serve users, developers, and AI agents. Its guidelines organize component quality into three layers: user experience, developer experience, and agentic experience.
The standard is intended to be learned once and applied consistently whether components are written by people or agents. It combines general foundations with component-specific documentation, checklists, contracts, tests, and reference implementations.
User and Developer Experience
The user experience layer calls for components that work predictably with keyboard, pointer, touch, and screen readers while following WAI-ARIA. It covers hover, focus, active, disabled, loading, and error states, as well as preferences for motion, contrast, color scheme, and text size.
The developer experience layer emphasizes consistent names for sizes, colors, states, and events. APIs should be typed and documented, small parts should compose without hidden coupling, and state should support both controlled and uncontrolled use.
Agentic Experience
The agentic layer makes components readable and verifiable by AI systems. Roles, names, and states are represented semantically; anatomy, props, and states are published in machine-readable specifications; identical inputs produce the same structure; and explicit rules give agents a way to check work before shipping.
Documentation is also published as Markdown, while component contracts are available separately in YAML and follow a shared JSON Schema. An MCP server provides contracts, rules, and documentation as tools, and an agent plugin supports compatible coding clients.
Component Documentation
Each component page follows a consistent structure covering its element, role, keyboard support, options, anatomy, variants, colors, sizes, states, and design tokens. It also separates UX, DX, and AX traits before presenting a checklist with stable rule IDs, levels, scope, basis, and verification guidance.
Reference implementations include tests and are currently provided in Vue. Shared foundations define conventions such as token paths for CSS variables and common theme tokens.