What Building 50+ UI Components Taught Me

I thought building UI components would mostly be about writing JSX and CSS. After building more than 50 components for EasyUI, I can say that was very wrong. The code is only one part of it. The harder part is deciding how the component should behave.

The first version is usually easy. Take a simple modal: You can make one pretty quickly. Open it. Close it. Add some styling. Done. Then you start asking questions. What happens when the user presses Escape? What happens when they click outside? What happens on mobile? What happens if the content is much longer than expected? What happens if someone wants to use a different button? What happens if the animation is turned off? Suddenly that simple modal is not so simple. This happened with almost every component I built.

Reusability changes how you write code. When I build something only for one project, I can make decisions based on that one screen. A reusable component does not give you that luxury. You have to think about the next person using it. That made me care much more about component APIs. I started asking myself whether a prop was actually useful or whether I was just adding another option because I could. Sometimes the best API is the smaller one.

Animation needs a reason. I really like animation. That is probably obvious from EasyUI. But building so many animated components also taught me that animation can easily become too much. Just because something can move does not mean it should. A dropdown does not need to fly across the screen. A button does not need a huge effect every time you click it. Most of the animations I like now are small. A little movement. A slight change in scale. A smooth entrance. Something that makes the interaction feel natural without making the user wait for it.

The boring parts matter. There is also a lot of work nobody notices: Fixing a component on mobile. Checking spacing. Testing different text lengths. Cleaning up props. Fixing a weird animation. Making sure the component does not break when used somewhere else. Those things are not very exciting to post about, but they are what make the difference between a demo and something people can actually use.

I started thinking more about the person using it. This was probably the biggest change for me. Earlier, I would look at a component and ask: 'Does this look good?' Now I also ask: 'Does this make sense?' Those are two different questions. A component can look really good and still be annoying to use. So I started paying more attention to things like keyboard interaction, focus, responsive layouts, loading states and how the component behaves when something goes wrong. There is always another small detail.

50+ components later: I still do not think I have figured it all out. There are components in EasyUI that I look at now and think I could build them much better. That is actually a good thing. It means I can see the difference between how I used to build things and how I build them now. EasyUI started as a way for me to keep reusable UI components in one place. Building it has ended up teaching me a lot more about frontend development than I expected. And I am still adding to it.

EasyUI: https://www.easyui.site