I build a Web Component UI Kit.

Jeff Rodgers — Sat, 11 Apr 2026 14:50:21 +0000

I didn't wake up one day and decide to build a UI kit.

Like most things I've built, it started as a solution to a problem I had, for a project nobody asked for.

I spin up a lot of side projects in my free time, the kind that will never see the light of day. Little things that keep me entertained and challenged, and honestly, keep me sharp on technology I'd otherwise only read about.

About a year ago I was deep in a sci-fi browser game rabbit hole. I had spun up a few different projects across a few different frameworks just to get a feel for the latest versions of each, and I needed a UI that matched the aesthetic of the game without being tied to any one framework and without costing anything. This was a screw-around project after all.
After striking out on npm, nothing I found worked cleanly across the board. So I just started writing my own web components. A few buttons, some inputs, a handful of form elements. One component led to another and eventually I had a full suite.

That became Kepler UI, a heavily sci-fi inspired, zero-dependency web component toolkit with roughly 20 components, a theme switcher, and even a web-component-based SPA router. Over-engineered for a game I never finished, but I liked how it worked.

The problem wasn't the technology. Working with a web component kit in my own projects was honestly easier than dealing with framework-specific alternatives. The problem was that Kepler was too niche to be genuinely useful to anyone else. The sci-fi skin that made it fun to build made it hard to actually use in most real projects.

So I stripped it down, started fresh with a proper design system, and built something more practical.

That's Yumekit. You can check it out at yumekit.com.

Yumekit is everything Kepler should have been minus the sci-fi aesthetics. About 30 components, zero dependencies, and a single JS file import to get you fully styled and functional. Drop it into a React project, a Vue project, a Svelte project, or no framework at all, it doesn't care. That was the whole point.

Theming works through a component that lets you switch and customize themes dynamically without touching a stylesheet. It's one of those things that sounds like a small quality-of-life feature until you've spent an afternoon wrestling with CSS specificity in someone else's component library, and then it feels essential.

For anyone leaning on AI tools to build things right now, Yumekit ships with built-in agent skills and LLM instruction sets, which means tools like Cursor or Claude already have the context they need to use it correctly from the start. If you're vibe coding a project together with an AI and want a UI layer that just works without a lot of hand-holding in your prompts, it fits naturally into that workflow.

It's early, it's open source, and I'm genuinely still figuring out what it should be. If you try it and something is broken, confusing, or just obviously missing, I'd rather hear about it now than six months from now when bad patterns have calcified. Issues and PRs are open, and so is the discussion below.

What would make something like this actually useful to you?

DEV Community: Jeff Rodgers

I build a Web Component UI Kit.