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