Selecting a UI component library

[andrelandgraf]

We have to select a UI component library to use. There are different UI component libraries with different scopes. Some implement a certain given design system (Material Design -> Material UI), while others implement accessibility best practices but offer custom styling (Headless UI).

There are different trade-offs for both. What should we use? :)

[shami-dev]

Great idea Andre to discuss it here!

• Can we still discuss other libraries?
• The other question is, can we use a few UI libraries simultaneously?

We can start by listing the components needed for our project and checking the most relevant libraries. Also, good to define requirements for the components. As we're building a social app, it definitely should be accessible. Other factors that come to my mind: the ease of use and documentation.

I haven't used any libraries in my projects yet but Radix and https://reakit.io/ fits well. Anyway, more information is needed. One more library to check out: https://ui.shadcn.com/

[andrelandgraf]

I would advise using only one library to avoid the complexity of overlapping components (which one do we use then?). Also, every library we add results in a bigger payload (website size) for the client (which slows our page load).

[andrelandgraf]

Any concerns with just starting with Headless UI and building our own custom components on top if we need anything else? What would be missing from Headless UI?

[CamilingJS]

Any concerns with just starting with Headless UI and building our own custom components on top if we need anything else? What would be missing from Headless UI?

No concerns with Headless UI. LGTM!

[hrm123]

Should we create design system in figma? https://www.figma.com/blog/how-to-build-your-design-system-in-figma/

[shami-dev]

Any concerns with just starting with Headless UI and building our own custom components on top if we need anything else? What would be missing from Headless UI?

Overall, it's a great choice, Andre. As we are looking for a small and accessible library, then go with Headless UI. Also, I know that by default it uses heroicons.

[thisistonydang]

Since we're using TailwindCSS and HeadlessUI, would anyone be opposed to adding @tailwindcss/forms to our project?

It's an official plugin from Tailwind that provides a basic reset for form styles, giving form elements a better base to override with Tailwind utility classes. I've used this in several projects and have had good experience with it. It also works nicely with HeadlessUI.

[andrelandgraf]

Happy to try out @tailwindcss/forms! Let's make sure to have our own wrapper components for each element! This way we don't expose the implementation details of the UI components to our routes and higher-level components and it will be easier to switch UI component library if needed.

[eiffelwong1]

selected headless UI and tailwindCSS (some functions might not be in headless UI, like calender. we can search for it in future)