Crafting a user interface (UI) is a crucial first step in any project. But when it comes to building that UI, the debate around technology stacks can get heated. One key question stands out: Should we leverage a pre-built UI component library?

🧑‍🚀 1. Need a UI component Library or not?

My experience collaborating with talented developers across various projects reveals interesting trends in UI library selection.
🧑🧔‍♀️ Smaller teams with limited UI specialists often opt for established UI component frameworks like Ant Design or Material UI, or even pre-built themes from Themeforest. These pre-built solutions offer a quicker start and a consistent design foundation.
🧑🧔‍♀️🧑🧔‍♀️🧑 Conversely, teams with strong front-end talent often choose to build their own UI component library. This approach leverages developers' expertise and tailors the UI components specifically to project needs. Often, these custom libraries are built on top of popular CSS frameworks like Bootstrap or Tailwind CSS.

According to my experience, we really need an UI component Library because we do not have enough resources and developers to make a good UI component Library.

🧑‍🚀 2. Completing a UI component is not simple

I'm quite a perfectionist developer when doing to UI/UX. For me, building a UI component for a developer is not easy or simple.

First, you will miss the UX problem if you create components that you think are simple. For example, Tab component, you think that simply creating a component that can generate many tabs is okay, you are wrong because it is not that simple. Because in some cases like responsive, your tab must also be collapsed instead of disappearing. You can refer how Ant Design do this: https://ant.design/components/tabs

Additionally, if you are good at UX, you will know that we should support users using hotkeys, for example [🡲] or [🡰] for navigation.

A collapsed tab of Ant Design

If you are a good frontend developer, you should definitely take care of this issue without being asked by the Design team.

A second example is about the Dropdown component, you should always render the dropdown content on the outermost side, in the body tag, not in your component. This is to avoid users using "overflow: hidden" for a wrapper component and losing the dropdown placed in that wrapper component.

And there are so many things I could mention, if you make a UI component yourself, you will definitely have many shortcomings and bugs.

🧑‍🚀 3. You will be outdated

If you regularly follow browser updates like Chrome: https://developer.chrome.com/blog, you will see that there are many new updates over time that help you solve UI problems on your website easier. If you build a UI Library yourself, you better update every day if you don't want to fall behind.

Using an existing library is an advantage because they have a team that can do it every day.

Chrome updates everyday with many new features

🧑‍🚀 4. Document UI component is not easy and time consuming

You need to clearly document the UI component and help the Design team understand if you are doing a project with many participants. There are several ways to document your ui component as Storybook. However, you need to have a few developers willing to do that every time your library is updated.

Storybook provides a workshop to build UIs in isolation

🧑‍🚀 Conclusions

In my experience, if you are building a large project and want to build your own UI Library, you need at least 2 people who are really experienced, have the ability to write good code and have an aesthetic eye. Always available to maintain and update UI Library throughout the project and have a long-term plan to develop / maintain / write tests. In addition, the Design team must always closely follow and support the UI Library writing team to complete it well right from the first bricks.

If you don't have enough resources like I said, use a UI Library and customize it into a high-level library based on the Designs of your project, don't try to build a separate UI Library and it will ruin the whole project. .

Of course there will be difficulties when you use an existing UI component such as: the bundle file is large, difficult to customize, depends on a third party,... However, it is the best choice you can have. when you have few resources on hand and want to create quality products.

Thanks for your reading!

Scroll Nap Type: Build a professional Carousel with only CSS

Related Blogs