Skip to main content
Github repo

Theme config

Theme mode
Color palette
Grays
Border radii/radiuses/radiopedes/you know
Border radius
Field border radius
Button border radius
Get CSS
All
Components
Guides
API
Recent
↑↓ Navigate
←→ Category
↵ Select
esc Close

Guide

Why Open Props UI?

A CSS UI library exploring how next-gen HTML & CSS features can change the way we create components. Designed to be used by professional teams as well as tinkering hobbyists.

Everything is made with ease-of-use and scalability in mind. Last but not least - you copy and paste the components into your repo. It's the best way to have a complete understanding and ownership over your stuff.

Backstory

When I started this project it was a reaction to UI libraries being slow to adopt widespread CSS features. Some barely used CSS grid or gap. Open Props UI would be that blank slate rethink of how a UI library could be built if you used the most modern features.

In general however, I'm mostly just very curious about how far we can push HTML and CSS now that so much has happened these last couple of years. For understandable reasons many developers haven't been keeping up, but our toolbox has been updated so much now that we need examples of how to use it. Making small demos on Codepen or looking at examples on MDN wouldn't cut it - there needed to be some weight behind it. I needed to convince myself as much as anyone else that these newly landed features are capable of real world usage.

As I've been working on this I have gotten more convinced that right now, and going forwards, frontend developers need to re-examine their assumtions. If nothing else, library developers have to look more closely at what the platform offers. AI has pushed developers into an architect kind of role, so if we're not as involved in how the code is written anymore, we need to make sure the foundations are solid.

Or what do I know, maybe the output is the only thing that matters? I don't think I believe that yet, but if nothing else this has been fun.

The goal of OPUI

  • Have pragmatic defaults without sacrificing flexibility and control
  • Leverage the native platform as much as possible
  • Follow accessibility guidelines
  • Serve as an inspiration
  • Be scalable

"If you only use the latest features, that means this is can never enter production"

Yes and no. Right now that's true for many components. The point is to let the spec and the components mature alongside each other and in time the library will be ready for production.

We're all adults here, we make the decisions we think are best.