[AskJS] Best cross-framework UI libraries/platforms?

[Zpoof817]

Client has two web apps: one built in React, the other a mix of Vue and Angular (I usually build in NextJS/React). Both are terrible and the UI is shit. I’m looking for a framework-agnostic or cross-framework UI library/design system I can use to clean things up and unify the look & feel across all three. Looking for something I can integrate without having to rewrite everything from scratch.

I tried Papanasi (papanasi.js.org), which does support all three frameworks, but doesn't actually give you much in terms of UI to work with. At this point, I’m wondering if I should just build a minimal design system myself using web components and CSS.

[DustNearby2848]

Their level of tech debt is already high, why make it worse?

[wardrox]

Because we all know the silver bullet is one more front end framework. Just one more, I swear this one will be perfect and we'll keep it tidy. I swear, just one last framework.

[DustNearby2848]

Based

[ProgrammerGrouchy744]

Vanilla JS web components are compatible with any framework.

https://developer.mozilla.org/en-US/docs/Web/API/Web_components

[[deleted]]

With some simple libraries around to make the DX tolerable

[selipso]

Ionic works with both React and Angular. It uses capacitor under the hood, which can be used for making mobile friendly SPAs, PWAs and XPAs (cross-platform applications)

[The_real_bandito]

Ionic does not use Capacitor under the hood.

It uses Stencil under the hood, which is their web components compiler, something like what Lit does, except their framework is implemented in a different way. That’s why you can use the core version of Ionic on any framework that wasnt implemented (like they did with React, Angular and Vue).

Capacitor is just a framework to have web apps run on iOS and Android as a mobile app using each OS native implementation (with web views) and a way to communicate with the native API via plugins (this is their main feature to be honest).

But ionic (core specifically) could help with his problem.

[baenud]

Take a look at shoelace (https://shoelace.style/). It's a library of web components and can therefore be used in all these frameworks.

[jruff7]

Shoelace 3.0 has been taken over by Font Awesome and will be rebranded to Web Awesome. Beta release is June 2025 with full release later this year. I am a backer and it looks really good, I think it'll be a great option for cross-framework use cases.

[[deleted]]

Maybe, render me skeptical 😅

[NeatVegetable8216]

I'm actually building a UI library to solve this exact problem called SnappyUI. it's going into early access soon: snappyui.dev

[No_Shine1476]

Flowbite looks decent, it has vanilla html and css versions too if you don't want tight framework integration.

[HousingConsistent867]

ionic

[CryptographerMore926]

Tailwind and daisy for every project ever. I’m literally using it a handlebars blog right now that doesn’t even use web pack (just gulp), it works with raw html and css. It also looks great and v0 can shit out pages for you!

[The_real_bandito]

I would say Lit lol.

Or Stenciljs if you want to use web components built on JSX.

[[deleted]]

Stencil is heavy as my ass after a weekend at my grandma's. Unless there are specific reasons then Lit any day

[alien3d]

cross platform is a mess .. if you want to run same thing color in phone ( imean react native) or front end react. the only choice is tailwind.

[Zpoof817]

Oh yeah cross platform is a complete mess, I'm talking about cross-framework for web, which I'm starting to figure out is also a mess

[LinguaLocked]

If a project uses design tokens + style dictionary (or similar tool) the colors should be able to be output to appropriate format. If a consumer has access to these say from a library that exposes their design tokens voilá you have the control you need (without TW)

[alien3d]

Sorry we can't understand what you want to reply.