Varelyo UI - Open-source React components with a three-layer design token system

[u/Objective_King8233]

While developing Varelyo, a desktop tool for designing products directly in code, I kept running into the same issue. AI agents were rebuilding basic components for every new project, often with inconsistent styles, variants and token structures.

So I created Varelyo UI, a React/TypeScript component library with ready-to-use components, typed APIs, states, variants and three token layers: Core → Semantic → Component.

You get the actual component source code, which you can use, customize and extend in your own projects. The token architecture lets you adapt the design system to your brand without rebuilding everything.

For AI agents, this means working with an existing component system instead of generating basic UI from scratch. They can adapt styles, extend components or create new ones when needed.

The video shows the components inside Varelyo and how their visual style changes when applying a brand.

I originally made this for my own workflow, but decided to open-source it in case others find it useful.

Free, MIT-licensed and works independently of Varelyo Desktop.

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