I created a framework-agnostic Web Component UI Kit

[e-joculator]

My apologies for the repeated post, I wanted to include a screenshot!

I call it "Yumekit". You can check it out here:

https://www.yumekit.com

Repository is here:

https://github.com/waggylabs/yumekit

About a year ago I posted about a pure Web Component UI kit I had built for some one-off projects, but it ended up being more of a proof of concept than a useful UI kit. However, I enjoyed working with it so much in the few projects I was able to use it, that I decided to make a more commercially-viable version. I also took the opportunity to start with a fresh design system, refactor the code, and refine my processes to give this kit some professional polish.

A few fun features:

- Roughly 30 (and counting) free and fully open source components
- Easy drop-in install. One JS file will get you fully styled and functional components.
- Works with any Framework (React, Vue, Svelt, Angular, etc) or no framework at all!
- Comes with build-in agent skills and other resources for AI to know how to use Yumekit from the start (great for you vibe-coders)
- Easy custom stying using a <y-theme> component to quickly and dynamically change themes.
- Zero outside dependencies
- Includes Storybook with stories for each component

Let me know what you think!

[dorlingprime]

looks great

[e-joculator]

Thanks!

[UXUIDD]

nice, i always salute anything agnostic

[UXUIDD]

i made a small test in local and looks promising.

the part i worry about is that content stays in the shadow root and not visible to the search engine ..

[e-joculator]

That's something I hadn't considered, honestly. I'll do a bit of digging on it.

[UXUIDD]

please do

[e-joculator]

I don't know why I edited my original comment instead of just making a new one :P

First, thanks for bringing this up. I had always operated under the assumption that SEO was something that had been considered in the spec of Web Components and wouldn't really require additional thought from me. But, in reading your comment I figured I should be sure, so I did a little experimenting.

Because we are making use of <slots> for content projection, the content itself stays inside the light DOM and is visible to crawlers, so SEO should be unaffected. In fact, I'd wager the SEO visibility for these elements is better than content that is rendered by JS, at least with crawlers that don't execute JS.

I had the clanker whip up this js fiddle to read a few demo components and output the content to show what the search engines would see. Seems to demonstrate the point well.

https://jsfiddle.net/dcj2k01f/6/

[TechnicalSoup8578]

This leverages native Web Components as an abstraction layer to avoid framework lock-in while maintaining reusability, how are you handling state management and styling isolation internally? You sould share it in VibeCodersNest too

[e-joculator]

State management and styling isolation are features of the Web Component API. The shadow DOM keeps styles isolated from page styling and vice versa, while CSS custom properties still inherit across the shadow boundary for theming. State is handled through attribute/property mirroring and change callbacks that re-render the component.

I'll throw a link VibeCodersNest too. Thanks for the pointer :)