I've had a good experience so far working on an admin dashboard with BeerCSS (and Datastar which is unrelated). It implements a lot of the Material Design stuff and it is opinionated but between the examples on the main site and documentation on GitHub it was pleasant to work with. It's easy to get started too, just add three links in the <head>.
It's not just that many design systems are tied to a particular framework, it's that they don't play well with HTML, and therefore classically server-rendering frameworks like Rails, Django, PHP, etc.
With custom elements you can just drop `<my-dropdown>` in your server template and that's where the dropdown widget will be.
Something like Shoelace[1] would be very nice to use with Rails.
Custom Elements don't play well with HTML either. And "just dropping <my-dropdown>" is not much different from "just dropping <div id=app> and running some framework code on it"
It's strange to see people downvoting this when custom elements still can't be properly rendered on the server. All the attempts are very framework specific, e.g. lit's list of caveats https://lit.dev/docs/ssr/overview/ (and shoelace referenced above depends on lit).
There's nothing very special in sending a html tag and then attaching functionality to it with javascript when it's loaded in the browser.
Framework server rendering is framework specific... Seems like a framework problem.
At least custom elements can just be including in framework-specific templates and be included in the rendered output, even if not deeply server-rendered.
It's actually very difficult to do this correctly and at scale with a framework like React, because in React you need an ID and JS call to initialize each embedded component, when custom elements initialize themselves.
Anyway, you have an axe to grind, so have fun with that. I'll see you next time I make a positive comment about web components I guess.
https://github.com/beercss/beercss
https://www.beercss.com/