60 Themes, 51 Components, still 0 Dependencies. Yumekit v0.5 Released!

Jeff Rodgers — Sat, 27 Jun 2026 15:55:04 +0000

Back in May we here at Waggy Labs launched the beta release of our Web Component UI kit "Yumekit". Yumekit is a pure web component UI toolkit. Upon its release, it was comprised of roughly 36 fully styled and fully functional UI components that work with just about every web architecture straight out of the box. No configuration or setup necessary, all one needs to do is include the Yumekit script (using either a CDN or installed through NPM) and start building. All components come styled out of the box with no need to include any style sheets.

Last week, we launched version 0.5. With this latest release, that job is being made easier with the inclusion of new components that add several layout options as well as new Data, Navigation, and Utility components, bringing the total number of components to 51.

For us, this toolkit has provided us a framework-agnostic solution for our internal tools as well as any client projects. With over 60 themes spread over 9 well-known (and some brand new) open source Design Systems all built directly into the library, we have plenty of options available to us to keep our designs fresh without needing to spend hours dealing with CSS. It's light-weight, dependency free, and well documented.

New in 0.5

Animate

The y-animate component allows you to animate entrances and exits for nested components using a few simple configuration attributes.

Code

The y-code component allows you to display formatted and colorized code, as well as providing a few easy and convenient ways for your users to copy the provided code.

Help

The y-help component provides a tutorial experience for users of your application with minimal configuration. Simply provide the elements to be highlighted, the messages to be shown, and it handles the rest!

Paginator

y-paginator provides a configurable set of pagination buttons to help your users navigate through large data sets.

Sidebar

We had originally included a y-appbar component (which we still do) that had a "Sidebar" mode. However, as we added additional features we felt that perhaps the sidebar and nav bar were too different to be able to share a codebase, so we split the Sidebar mode into its own component and simplified the y-appbar component.

Avatar Group

This simple component stacks either a vertical or horizontal set of y-avatar components with automatic overflow functionality.

Data Grid

Our most complex component thus far, the y-datagrid component allows you to easily display large sets of data in a filterable and sortable table. While the y-table component is great for displaying small data sets, y-datagrid is built for pages and pages of data.

Popover

When the tooltip or a dialog doesn't cut it, the y-popover component saves the day. Landing right in between the two in terms of functionality, it allows you to attach complex popover items to other components in your UI.

Break

Our first new layout component provides a way to break up large pages with a vertical or horizontal separator. Also has the ability to display custom content within the break component.

Droplist

A drag-and-drop list of any component you wish. Simply add children components and they will be draggable and droppable amongst one another.

Grid

Not to be confused with "Data Grid", y-grid is a pure layout component. It will automatically lay out any provided children in a grid format with attributes that cover most of the most commonly used CSS grid properties. y-masonry works the same as y-grid, but will arrange its children in a masonry configuration and has a simpler set of rules.

Shape

The y-shape component uses SVG shapes as frames around child elements, allowing you to present content within non-rectangular containers. Choose from any of the built-in shapes or supply your own custom SVG vectors for complete creative control.

Splitter

The y-splitter will let you put side-by-side content in a container that allows you to adjust the width or height of the contents with a draggable splitter bar.

Themes and Design Systems

We know that reliance on a lot of today's popular design systems like Google's Material or IBM's Carbon make migrations hard because of the limited framework-specific options available for those design systems. With Yumekit, this isn't a problem. As of version 0.5, the y-theme component has 60 themes built into it, some of which use the very same design systems such as Material and Carbon, as well as other popular systems like Shadcn, Bootstrap, Ant Design, and more.

We also added several new color options to the Yume Design system that were inspired by projects like "Catppuccin" and "Nord", as well as a few new design systems besides the "Yume" system such as "Kepler" which is a techy/sci-fi throwback to KeplerUI (the proof-of-concept used as the basis for Yumekit) and "Waggy" which is the design system Waggy Labs is using in our upcoming website. Because all of these themes are built right into the y-theme component, switching between them doesn't require loading additional style sheets or reloading any content.

All of these themes are usable in the y-theme component by setting the theme string attribute to your preferred theme, or you can include a custom theme file if our themes don't provide you with the exact specifications needed for your project.

If it's custom themes you need, Yumekit provides a whole list of CSS variables that can be tweaked to get the exact look you need without needing to create new CSS classes and rules. Of course, if you still need additional customization to cover the areas where our CSS variables don't cut it, all components expose CSS "parts" to easily apply in-depth CSS customization.

Want to nest themes? Easy. y-theme components can be nested within each other without any effect on each other.

Fast and easy theming is great for dev shops that are in need of a UI kit that can fit any of their clients' needs, making Yumekit an ideal choice. Pair that with the ability to use it with any framework and built-in support for coding agents and you have a recipe for fast and efficient output, no matter the existing architecture.

Design Tokens

As part of 0.5, we moved away from static style sheets for our variable definitions and instead implemented tokens defined in JSON, which are then used as the single source of truth not just for generated theme style sheets, but for our Figma document as well (via the "Tokens Studio" Figma extension). This is only for built-in themes though; custom style sheets still work as expected with the y-theme component.

Storybook

While Yumekit has always included Storybook in the repository, running it required cloning the repository locally. Now we've published the storybook at storybook.yumekit.com so you can access it without needing to clone the repository to your local machine. It contains examples for the most common uses of the various attributes for each component.

AI Enhancements

Yumekit already includes an llm.txt as well as several references and skill files for coding agents. However, loading these into your project used to require manually copying them to the root of your project. Now we've automated that with a script. Simply run npx @waggylabs/yumekit init-ai and all relevant files are safely placed where they are needed without overwriting existing AI documents.

Looking Ahead

Now that we have completed the core components that we think are necessary for the base library, the coming months will be focused on fit and finish. This is where we're looking to you, our lovely users, to help us find flaws and pain points that fall outside of our normal testing and usage. We are planning to release the full 1.0 version of Yumekit in September of 2026, contingent on ongoing feedback from our users.

We are committed to providing a toolkit that seasoned developers, designers, or even you vibe coders out there can get started with instantly. So give Yumekit a try and let us know what you think!

Website:
yumekit.com

Github Repo:
github.com/waggylabs/yumekit

I built 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 <y-theme> 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