Should Open SaaS use Shadcn for Styling & Other Redesign Questions

[vincanger]

Open SaaS redesign

We're going to give Open SaaS a makeover (without raising too many eyebrows hopefully).

We are considering a few big changes and would like your input.

Please vote with emojis, and leave comments to address open-ended questions.

Shadcn or just Tailwindcss

• Refactor the entire codebase to use Shadcn-ui's components: 🚀
• Stick with Tailwindcss: 👀

Multiple Landing Pages

• Offer multiple landing page designs/variations: 🎉
• Stick with one landing page but make it really dope: 👍

Design Directions

• We're looking for inspiration and suggestions for our redesign direction. If you have any examples of how you'd like Open SaaS to look, please paste images or link to them below. Remember this is a SaaS boilerplate starter so they should be generic enough to work with different SaaS products, while also looking professional and clean.

[cameronapak]

Thanks for creating this discussion!

TailwindCSS is wonderful to have, but it still requires users to write a lot of classes to create something beautiful. In my experience, most devs are not UI aficionados, so they reach for something like Shadcn-ui or daisyUI (or in the old days Bootstrap).

I vote for Shadcn-ui because:

1. The components and blocks are beautiful
2. It's LLM-friendly since the component code is scaffolded into your project
3. It doesn't require someone to have deeper level knowledge of CSS to use

This is an opinion

If in the future Wasp really does plan to allow other front-end client frameworks instead of react, then I'd reach for daisyUI, since it's class-based styling

[ashanideepta]

I would totally vote for migrating to ShadCN for the UI components as much as possible. I am trying to build a new SaaS from scratch and the only reason I've even been considering something other than OpenSaaS right now is because for example https://github.com/ixartz/SaaS-Boilerplate incorporates ShadCN from the ground up. The UI feel is just much more polished and personally me being more of a backend developer/architect than a frontend guy I'd love it if I didn't worry about that stuff as I'm building an app. Honestly I would pick this issue up and help if I could but I'm pretty sure it's beyond me.

[samuelenera]

Totally agree. If you introduce Shadcn and basic multi tenant support, this will be used by many more 👍🏼

[Martinsos]

Totally agree. If you introduce Shadcn and basic multi tenant support, this will be used by many more 👍🏼

@samuelenera thanks for sharing! Would you mind giving a bit of extra details on what you would expect from the multi tenancy? Maybe description of a use case also would help!

[samuelenera]

@Martinsos Sure. Here's a quick example: https://share.vidyard.com/watch/SvRmkEhTgjaJv9TM89AvJH Thanks 🙌🏼

[Martinsos]

@Martinsos Sure. Here's a quick example: https://share.vidyard.com/watch/SvRmkEhTgjaJv9TM89AvJH Thanks 🙌🏼

Awesome, thanks for the video, that clears it up! Ok got it, so we are talking about having something like an Organization (in your case a Company) to which users can belong, and then they can also have different roles in that Org, and invite new people, and similar. And you are a kind of super admin.

That makes sense, it is sometihng we shoudl supprot for sure. I would even say it is not that hard to add as some other features, but what is tricky is figuring out how to design so it fits people with different needs. But there is probably some middle ground that would be a good starting point for people.

I was asking about it btw because some people mean this when then say multi-tenancy, what you described, but some mean that they want each tenant (let's say Organization) to have a different database, so not all in one database as is often normal, but actually having separate dbs, maybe even separate hosted apps, and that is quite more complex and a different use case.

I actually see @vincanger already has even an issue for it already here: https://github.com/wasp-lang/open-saas/issues/312 , for the Orgs.

[vincanger]

@ashanideepta thanks for the info. In case you're interested in using ShadCN UI in open saas without waiting for us to add it to the template, check out this guide (it's pretty simple to start using shadcn components with open saas right now): https://gist.github.com/infomiho/b35e9366e16913949e13eaba0538f553

[arn314]

Why not have both shadcn and tailwindcss as options? A boilerplate with different options to choose from would be great. Inspiration from: https://better-t-stack.amanv.dev/

[vinayagg]

each tenant (let's say Organization) to have a different database, so not all in one database as is often normal, but actually having separate dbs, maybe even separate hosted apps

I came here looking for multi-tenacy. By the way Separate hosted apps = single tenacy One app share by many orgs = multi tenacy

Multi tenacy = one hosted instance of app but still each org has their own settings, own users and roles, their own data (without separate databases).

• Data is isolated at the application or database layer using schemas or tenant IDs. (sometimes separate dbs but that is complex and rare)
• Despite single application instance, configurations and settings only effect that tenant.
• Sometimes tenants have their own subdomain (tenant.domain.com) or slug (www.domain.com/tenant1 / tenant id) or sometimes none

Other advanced concepts not needed at least for first iteration of multi tenacy:

• host multiple versions and let organizations move to new version when they are ready
• for usage based billing, usage is counted per tenant
• Another issue is with integrating with external apps like Google SSO. external app should treat each tenant separately. If one organization integrates google SSO with their own key, google should not allow all users of all tenants to log in

Here is a quick overview https://medium.com/@seetharamugn/complete-guide-to-multi-tenant-architecture-d69b24b518d6

Do you think an initial cut is doable?

[vincanger]

we now use shadcn as of the most recent major update.

[cameronapak]

LETS GOOOOOOOOOOOOO!