Enhance the UI/Design

[vincanger]

From @mindreaderlupoDO on discord:

I don't know where to put this topic, it's not a clear question, more a general discussion.

Are there any plans (by the wasp team or by anyone out of the community) to work on the OpenSaaS UI? At the moment I think it's okay but you quickly notice, that design was not the core/priority in this project. (Admin pages different to the rest, issues with responsiveness, etc.) And that's understandable because you want to introduce wasp and not tailwind.

Anyway, for me (newbie to programming in general - which might be a typical profile for a user of OpenSaas) the UI part is very important and I struggle a lot to make all my components consistent and add special things like date pickers, collapsible menus, etc.

My questions/discussions: Would it be a good idea to integrate a design framework on top of tailwind into OpenSaaS? What would be recommended (open source) libraries to have a straightforward developing experience with the UI as with the rest where wasp is taking care?

[Martinsos]

So actions items based on this:

1. Would it make sense to include a design framework in open-saas? That does sound a bit tempting to me, although it might be too opinionated, people might find it too prescriptive?
2. Should we take an effort of making our current design more homogeneous?
3. If we are not including a design framework, should we do some recommendations at least?

[mindreaderlupo]

Oh, nice discussion going on here 🙂 I think it's always a tradeoff, If you go for one Design -Framework, you maybe miss the opportunities of another one. Since OpenSaaS should be for a broad audience (as I assume) it's also dangerous to lock in to a very specific thing which may lead to loosing the general purpose of the boilerplate.

But if the goal is to start with a SaaS in a few Days, it would be the biggest leverage of timesaving to help folks with the UI/Design -Part.

In other aspects of SaaS you pinpointed the de-facto standards with stripe, Google Analytics, Keycloak, Sendgrid, openAI,... Isn't there something like that for Design? I don't know much, but as far as I understood, it's kind of a hierarchy of the frameworks like css is the basic for everything, tailwind simplifies the usage and then there are component-libaries like headlessUI, radixUI or daisyUI. Maybe implementing one of those including examples for typical components would help a lot.

Which kind of component is needed in any SaaS? - I think a table view of an entity which works for desktop and mobile is always needed. Forms with input, select, checkbox, date pickers and buttons is the basic to create and edit entities. ...the more I think about this question, the more I come to the conclusion that you need the full flexibility of the big component libraries. ... Maybe it's more about the workflow how to quickly integrate them consistently. Than you don't have maintaince of this part in the OpenSaaS codebase.

Those are just brainstorming and writing down unfinished thoughts.

[mindreaderlupo]

Since I need a solution for my project, I played around with some libraries. The one I like is shadcn. Not because of the library itself but because there is a good explanation how to integrate it with wasp. So I fully agree, working on instructions/docs might be a big step in the right direction.

The issue I have right now is, that there are 3 opinionated Stylings: OpenSaaS-App, OpenSaaS-Admin and Chadcn. Everything comes in light and dark mode. Now refactoring everything to be consistent is a lot of annoying work 🙂 I think if this work is done once as a standard for OpenSaaS, it would be very helpful.

I will continue juggling tailwind-classes and in case the outcome is better than it was before, I will let you know 🙂