Universal Components UI Library Proposal

need some feedback here, please Help!

After react-europe, I’ve become obessedly in love with React Native and how it helps to make the shift about treating the web as another platform, and not the primary one for React. Also I’ve been really interested into design systems and how not only to design one but how to implement it with React.

The problem I have with current UI Libraries

I like UI Libraries, it helps to Build stuff fast and forget about aesthetics when creating your projects. But almost all of them, forced you to structure UI and elements their way, and every time I wanted to do something slightly different from one of the components it was a pain in the *ss. Maybe I’m not that smart to customize a UI library but this happens to me all the time.

I want the ability to use a UI Library, but don’t want it to force me to use its semantics or its styles, I want that freedom sometimes…

So!, that being said, I create a codesandbox with a proposal for a UI Library of Universal Components that have a base structure and styles, but also give you freedom to change not only the styles but the semantics (HTML). The way I give that freedom is with the render prop pattern. below its the demo:

Of course this is a PRETTY BASIC EXAMPLE, but hopefully this helps to explain my idea.

some cool things about this:

• universal components, same components, multiple platforms
• base design system customizable
• FREEDOM to change semantics on components
• styles composable

some things I may implement:

• Theme Provider with a specific Shape to follow a design system
• styled-components 💅
• expose base UI animations
• develop it with a type system like TypeScript or ReasonML
• of course, storybook!

and that’s it! I shared a twitter thread couple of days ago about this:

If you want to know more about universal Components, I recomment you check this talk about it, and ask kurtiskemple and Samantha Bretous (thanks guys!)

What are your thoughts? do you think this is useful? what can be exposed apart from the styles and the theme?

thanks for your time!!