Pick a component libary

[JulianDietzel]

What?

Pick a component library for the rewrite of the app.

Why?

Before the rewrite we used Bootstrap which provided both the styling and the components (Dropdowns, Date Pickers, Popup Dialogues, etc.). In the rewrite so far we have TailwindCSS which only provides the styling but no components. In order to not rewrite the logic for, for example, dropdowns every time it would be nice to have a component library which already contains the most common components.

Requirements (at least the ones I can think of)

• Works in combination with Vite and Vue (obvious but critical)
• Plays well with TailwindCSS styling
• Should be at least a moment old. For the simple reason that it is not just pure hype, has been used in production by a decent user base and the issues are well known

It would be nice if the components could visually be modified (change the inner padding of buttons, round the corners of drop downs more or less, etc.). It's not critical but would be really nice.

Alternatives

I'm no expert on this but since we really wouldn't need many components, we could probably get away with creating our own components. shadcn is on the MIT License so we could even use snippets of theirs code base. The benefit I could see for this approach is that we would have one less dependency in the project (that can stop receiving updates, loose backwards compatibility, ...) and that we could potentially customize to components to a greater extend. But then also it kind of feels like reinventing the wheel on a project where none of us have a great deal of time to work on it.

[Dosbodoke]

There are some options that immediately come to my mind.

Nuxt UI: I have never used but heard a lot about, it's well used across the Vue community but I think it requires the project to be created with Nuxt and nod Vite as is the case of this project, it's not my preferred because you need to install the components and it's hard to customize it.

Shadcn Vue: After the huge success of shadcn for React, the community has implemented it on Vue, the huge advantage of this library is that it's headless, if you don't want you don't event need to install the CLI (that helps setting up the environment), you can just copy and paste the components that you want, I have developed 3 project with it and it's awesome.

Headless UI: Has the same logic as shadcn, you can install the CLI or copy and paste the components, change whatever you want... I have never used it because I prefer shadcn, but seens a good option.

[JulianDietzel]

Thanks for the overview :heart:. Going by this it seems like Shadcn seems to tick all the boxes. And you already having experience with it and knowing that it works well and how it works seems like a big bonus to me. In addition this is what @WaldemarLehner pointed me to in the beginning, too.

Since this seems like a core component of the project could both @WaldemarLehner and @bastislack please make sure that you agree with using this?

Also @Dosbodoke : If we decide on using Shadcn, it seems like some initial setup process is required, am I right? Do you see any potential problems with setting up the project for Shadcn in the current state of the project? And would you feel comfortable with doing the setup?

[WaldemarLehner]

Ye. Shadcn sounds good to me. I haven't used any of the 3 options myself, but Shadcn's approach of "bring your own style, we ill do the rest" and the three-shakeability make it a good option in my opinion.

There is also Radix, which — from my understanding, feel free to correct — is what shadcn uses under the hood.

Regardless of what we pick, I would recommend always thinking about whether or not a component can be done ourselves without the use of an external component first :)

[Dosbodoke]

Yes, you are right, it's an implementation over Radix, It basically adds the base style that can be fully customizable and a good implementation of the components.

About the following comment I don't agree with that.

Regardless of what we pick, I would recommend always thinking about whether or not a component can be done ? ourselves without the use of an external component first :)

Adding accessibility it's hard and tedious, for example, when you open a Modal you should add aria-hidden="true" to the <main /> tag so you can use the keyboard to navigate inside the Modal, you also need various aria attributes that Radix implement for us.

About the setup of shadcn it shouldn't be hard, I have an Open PR that implements it.

I'm excited to help the project, hope we agree on this so we can make more iterations to achieve a good design

[bastislack]

Thanks for looking into that! Shadcn looks good to me, let's go with that :)

[JulianDietzel]

Shadcn added in #311 by @Dosbodoke.