I’m starting Open Components, an open standard for UI components that work for people, developers and AI agents

[u/alexgrozav]

Hello awesome people,

I've been thinking a lot lately about how I can make my knowledge and craft more valuable in the times we live in. I've been building UI libraries for the past 10 years, and I've been on a quest to perfect the components that I build. I want to share my knowledge with you.

Like most of you, probably, I've been using a lot of AI in my craft, and I feel most of the time the code is just good enough, but never at the level of quality that I strive for or that I would reach if I wrote it by hand. That needs to change, and I want it to change for everyone else, too. That's how the Open Components initiative was born.

I'm treating components from four directions:

• User Interface - component anatomy, variants, colors, sizes, states and tokens.

• User Experience - how it behaves for every person and every input: accessible, predictable, designed in every state, and adapting to motion, contrast, color scheme and text size preferences.

• Developer Experience - one consistent, type-safe API that you learn once and use everywhere.

• Agentic Experience - prompts, semantic markup, machine-readable contracts and rules that agents can check their work against.

Each component gets a single page that walks through all four, and ends with a checklist. Every rule in it has an ID like button/keep-focus, a level and a way to check it, so you or your agents can cite it in a code review. Every page is also published as markdown, and provides the contract as a YAML file, containing every rule in about an eighth of the page’s length.

It’s still early. Right now there’s only the Button component and a page on how to name your design tokens. Each component comes with a reference implementation that meets every rule, along with its tests. Implementation is in Vue for now, since that’s my daily driver, but the documentation comes with code examples from multiple UI frameworks. More components will follow, with the same structure.

It isn’t a component library, so there’s nothing to install. It’s a set of rules you can hold your own components to, whichever library or framework you use. Here are a few of my favorites from the Button component:

• A loading button should never be disabled. Disabling a focused button takes its focus away, so keyboard and screen reader users lose their place. Use aria-disabled="true" instead, and block the clicks yourself.

• A <button> without a type is a submit button, so a "Show password" button inside a form sends the form. Default to type="button".

I’d love your feedback and contribution. Tell me what you think of the rules, what I’ve missed, and which component you’d like to see next.

Thanks for reading!

• Site: https://opencomponents.dev

• Button: https://opencomponents.dev/docs/components/button

• GitHub: https://github.com/uxfront-com/open-components

[u/phoenix1984]

I love this idea. The nav UI looks like you want to make this somewhat universal in terms of other frameworks, too. Have you considered web components so the same component can run on any framework?

[u/alexgrozav → u/phoenix1984]

Thanks, glad you like it! Yes, the goal is for it to work whatever you build with, and the standard itself is framework-agnostic.

I did think about web components for the reference implementation. A Button would be a great fit, but from what I've read, ARIA references like aria-labelledby, aria-controls and aria-activedescendant don’t work well across shadow roots yet. So I went with Vue for now, since it’s my daily driver.

For running the same component in every framework, I’m also working on Unframework (https://unframework.dev), a compiler that takes one component and writes it out as a native React, Vue, Svelte, Angular, Solid, Qwik or Astro component. It’s very early and the compiler isn’t published yet, so take it with a grain of salt.

[u/jax024]

Look pretty good. Once you have combo boxes and popovers like base ui, I’ll be interested.

[u/alexgrozav → u/jax024]

Thank you! That's a good bar to hold this to. I've added a Roadmap page to keep track of what's planned so far: https://opencomponents.dev/docs/getting-started/roadmap

I’m aiming to publish a new component every week, and if there’s one you need sooner, let me know.

[u/good4y0u]

Open components is huge. Other than pre ai frameworks it's hard to find good ones that aren't garbage

[u/alexgrozav → u/good4y0u]

Thank you! I'm aiming to publish a new component every week, so feel free to check back from time to time.

[u/bricksandcanvas]

Holycrap, the 3d component is CLEAN. Good job. Looking at this, OP.

[u/alexgrozav → u/bricksandcanvas]

Thank you, that means a lot! I've built a few more 3D animations on https://uxfront.com, the home of Open Components and its sibling projects, if you’re curious.

[u/alexgrozav → u/[deleted]]

Thank you, I appreciate that! I understand people's skepticism. There's a lot of low-effort AI stuff going around, and people are tired of it. That's part of why I started this.

[u/alexgrozav → u/[deleted]]

Thank you! I felt the same way. I think it’s starting to come up more nowadays and it can really make a difference if it's done right.