Yeah, ok. So your team has a bit of a challenge on your hands. IF and this is a MASSIVE IF I had the time, team, money and I was in your shoes then I'd probably try to use a mix of these two approaches: Come up with a solid Design System using something like Figma which outlines all the components including colours, typography, spacing, interactions, etc across all viewports you'll be targetting. Have a look at different ways that you can share the Design Systems non-component parts across React, Vue, Angular and React Native. For example, this could be CSS-in-JS variables. Now this is where it gets fun... (Option 1) Once you have the core Design System parts shared across all platforms, look at building the componentry and implementing the interactions. I'd be seriously thinking about how dumb I make the individual components because the dumber they are the easier it'll be to share the bulk of the markup across at least React, Vue and Angular. Then you focus on React Native. Having a fleshed out Design System would also mean that you have a solid reference point to keep all components/interactions in check. Now, depending on your team, and how large your Design System is, you could knock out the bulk of the dumb componentry fairly quickly. Then look at implementing the library/framework specifics (ie. onClick vs v-on vs (click) vs Pressable, etc). You'd want to have someone that's a lead or fairly senior that is across React, Vue, Angular and React Native to keep a hold of the overall quality. Mind you, these folks aren't easy to find. For me, its taken me over 10 years to go around the block and I'm only now touching React Native. I'd be seriously looking at the team composition because unless the folks know what they're doing in their respective fields of expertise, then you will lose/waste time with slow downs/quality issues, etc. Just as a reference, one of the most efficient projects I've been on was a 3 month contract where we built hundreds of components for over 900 new pages, for a major bank re-brand. The team consisted of 1x Lead Frontend Developer, 3x Senior Frontend Developers, 2x UI designers, 2x UX designers, 2x Info Architects?, 1x PM, 1x BA - thats the type of team you want. Just in your case, you'd want the Senior FEDs to be specialised in each framework/lib. What you want to do is do-able but you need the right resources for it not to turn to absolute ****. If you have an existing team, as a trial run, I'd honestly suggest doing a 2 week hackathon on a subset of the design system and see what happens. Just to summarise: 0. (Probably the most important bit) Review your team, skillsets, expertise with the aim being that everyone on the team is fairly senior and there's a lead to pull it all together Limit and flesh out the Design System Figure out how to share the bulk of the non-markup pieces of the Design System across React, Vue, Angular and React Native (CSS-in-JS maaaybe?) Build out the dumb componentry and try to share as much as you can among React, Vue, Angular... and handle React Native separately Once you've got the dumb componentry, switch focus to the interactive parts. Aim to get at least part of your Design System out for feedback sooner rather than later. And/OR (Option 2) Now this is something I haven't tried myself but might be worth exploring depending on how much time/money you have. Steve from Builder.io has two Youtube views and some blog posts about them training their own models to help with component generation. AGAIN, IF you have the time/money. It might be something worth exploring. Could you train/build your own model to convert whatever component from your Design System into which ever target framework/lib? Maybe? https://www.youtube.com/watch?v=bRFLE9qi3t8&t=2s https://www.youtube.com/watch?v=fCUkvL0mbxI https://www.builder.io/blog/build-ai https://www.builder.io/blog/train-ai Anyways, good luck. Project sounds challenging but if I was in your shoes. I'd take it on. If nothing else, you'll come away with a lot of lessons. haha PS. Keep me update if you do go ahead. Might have some more tips if you flick me a message. More on reddit.com

If you want your components to be reusable, it's either props or children. The component should just provide the layout/UI with no hardcoded content inside. React's own opinion on this: https://reactjs.org/docs/composition-vs-inheritance.html I suggest looking at popular libraries for some inspiration.. used this card lately https://www.primefaces.org/primereact/card/ More on reddit.com

In my experience, webpack is not easily fit for purpose in this use case. I have had quick success with roll-up to achieve this. https://medium.com/@tomaszmularczyk89/guide-to-building-a-react-components-library-with-rollup-and-styled-jsx-694ec66bd2 I would argue webpack is for react apps and roll-up is for component libraries. More on reddit.com

This looks great! Only thing I couldn’t quite see in the docs is how to do compound variants to style/apply classes when a combination of variants/props is present. Thanks for sharing! More on reddit.com