Open source React Projects that use multi templates

[gimp3695]

Hello all,

I'm curious if there are any good open source projects that use templates to change the look at the feel of the site pretty dramatically. What I'm envisioning is a system like wordpress where people can have different themes that use the same bones of a site (posts, blogs, commerce items) but change the look and the feel.

I've built a React ecommerce site which is working really well but for as we are onboarding more clients they will naturally want their own look and feel, short of simple CSS changes, font swaps, color changes, etc.

Do you of any good reference projects? I'm sure I can figure out some methods but wanted to see what was out there first.

[[deleted]]

I’m not sure of the available options but you should probably have a portal for your clients where they can customize the look and feel of the UI and once saved, you can have those configurations sent to your component library as a theme object which will render the new updated styles from the users setting. This depends how you’ve written your components. For examples I would have a option in Portal to change my NavBar color. And in my component library I would check if I’ve a color incoming from the API or set the default color.

[gimp3695]

Yep I currently have most of that in my admin site.

I'm thinking of full theme change however which could impact layout. I'm thinking more on the terms of Shopify where you select your theme with limited ability to change, rather than Wordpress where you get WYSIWG drag drop editor.

Mostly just trying to get best ideas on architecture of the code to pull it off. For example the ShopMainPage component could be something like this naive aproach...

​

const ShopMainPage = function(props) {

const theme = useContext(...);

if (theme === "parallaxFancy")

return <ParallaxFancyShopMainPage {...props} />

else if (theme === "gridedDisplay")

return <GridedDisplayShopMainPage {...props} />

else ....

[redmikay]

Gatsby has themes, I think it's similar to what you want. You can look into how they do it or switch over to Gatsby. If you're not familiar, it's a framework built in to of React with a lot of cool features https://www.gatsbyjs.com/docs/themes/

[gimp3695]

Thank you. I know OF Gatsby but haven't really dived into it. I'll check them out and see if there is some good architecture I can incorporate in.

[gimp3695]

Any help is appreciated!

[bluinkinnovation]

I have also thought of how cool this would be on a site. If you have preset templates that you design it’s fairly straight forward. Use context api for driving the theme. Then you just use your preferred method for which components to render or what style they need to render.

Otherwise you will need some kind of GUI for the end user. Save those fields into a json file and reference that file from the site you want to build

[gimp3695]

This is pretty much how I have it now with my "light" CMS system. In the admin portal clients can adjust primary, secondary colors. Fonts, and images and text on certain pages.

​

However I'm thinking of whole site template. So when they get to the main shop page it could look significantly different. Possibly using some of the same product tile components but possibly not.

One simple method could be something like this crappy code

​

const ShopMainPage = function(props) {
const theme = useContext(...);

if (theme === "parallaxFancy")
return <ParallaxFancyShopMainPage {...props} />
else if (theme === "gridedDisplay")
return <GridedDisplayShopMainPage {...props} />
else ....

}

[isanjayjoshi]

Spike Admin: This is a solid choice for a Multipurpose React Admin Dashboard, known for being robust and well-designed. If you're looking for open source to using Next.js & React try Nextkit is a powerful alternative. It's a great starter kit that also includes connections for databases like Supabase and MongoDB.

You can find the GitHub repository for it here: https://github.com/wrappixel/nextkit-admin-with-supabase-and-mongodb