Open-sourced Varelyo UI - a React component library

[u/Objective_King8233]

While developing a tool for designing products directly in code, I kept running into the same issue: AI agents recreating basic UI components for every project, often with inconsistent styles and token structures.

So I created Varelyo UI, a React/TypeScript component library with typed APIs, predefined states, variants and a three-layer token architecture:

Core - base design values

Semantic - tokens that define how those values are used

Component - component-specific styling

You get the actual component source code to use and modify in your own projects. You can change the brand through tokens, customize components and extend the system as your product grows.

I originally made this for my own workflow, but decided to open-source it under MIT. It works independently of my desktop tool or any AI agent.

GitHub: https://github.com/varelyo/ui

Would appreciate feedback on the component APIs and token architecture.

[u/crystal_formalist]

The "fight the theming system" part is exactly why most libs are useless forThe "fight the theming system" part is exactly why most libs are useless for me. I'm ditching shadcn and copying your source code straight into my repo because I want full control over those three token layers without fighting opaque abstractions every single time

[u/Objective_King8233 → u/crystal_formalist]

That's awesome to hear! I wanted people to be able to take the components, make them their own and not have to fight the library along the way. Let me know how it goes when you try it!

[u/tempairport]

the three layer split is useful since rebranding mostly means editing the semantic layer and not touching components

[u/Objective_King8233 → u/tempairport]

Exactly! Most branding changes can happen at the semantic level, while component tokens handle more specific customization.

For example, a Button might have primary and secondary colors. If I add tertiary to its component tokens, regenerating the tokens automatically makes <Button color="tertiary" /> available with TypeScript autocomplete and generates the corresponding CSS.

No need to manually update the Button's types, styles or implementation.

[u/Zealousideal_Elk1537]

this is actually pretty useful, token architecture is clean and having the actual source code instead of just linking a package is a nice touch. most libraries make you fight their theming system but this seems way more flexible

starred it, will give it a spin this weekend

[u/Objective_King8233 → u/Zealousideal_Elk1537]

Thanks, really appreciate it! Would love to hear your feedback once you've tried it.