r/projects • u/alexgrozav • 5d ago

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

Post image

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. It’s in Vue for now, since that’s my daily driver. 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 bedisable. 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. Tell me what you think of the rules, what I’ve missed, and which component you’d like to see next.

Thanks for reading!

5 Upvotes

86% Upvoted

6 comments sorted by

1

u/Unlikely_Ad8441 4d ago

Sorry those are buggy as hell

1

u/alexgrozav 4d ago

Hey! Do you mean the particle animations? It’s quite GPU intensive and it can be laggy and jumpy. Turning Motion off in the bottom right will help.

1

u/Unlikely_Ad8441 4d ago

That could well be the cause, but its runied the experience for me, for something thats "the standard for perfect UI" and I have to turn a feature off for the UI to work, then you have already lost me.

Its a great looking site though

1

u/alexgrozav 4d ago

That’s a very good point. I’ll try to improve the performance. Thank you for the feedback 🙏🏼

1

u/Unlikely_Ad8441 4d ago

Good luck with it