Top 5 “Most Valuable Components” in your components library
You might already have created your component library, which contains the most common components for your team, group, or maybe even your entire company! You followed all the best practices, created amazing documentation and you have a lot of happy consumers.
Obviously, there’s always room for improvement, but there are many components your users couldn’t live without. Components which make the design consistent or solve complex UI logic once and for all.
In Wix, our Dashboard Design System — “Wix Style React” (WSR in short) has a wide variety of those. I picked the ones that I find that give the most value to our users:
<Avatar/>
What makes a really good Avatar component is not only that it display images in several sizes, but rather how it handle the loading and error state, providing a fallback image or name initials. It provides a consistent look and solves the common pitfalls we usually forget to handle.
<Table/>
A Table component is obviously an important component when displaying large sets of data. It can contain important UI logic such as Infinite Scrolling to load more data or provide Rows Virtualization to make sure it performs well with large data sets.
It also consolidates the most common use cases like Bulk Selection, Filtering, and Sorting. The main challenge is how to keep the component light, yet powerful, which leads to splitting it into smaller composable chunks (Smaller UI units, pluggable logic hooks, etc…). The WSR Table is still far from there, but having that in mind can help us improve it in the future.
<MultiSelect/> (Tags Input)
A selection component with an autocomplete is “a must” in every library — a Tags component contains that and much more! Selection, Suggestions, Autocomplete, Reordering, and on top of it, a visual representation of tags is much more appealing to the eye. You can use it as an email input field or utilize it for badge creation.
<Box/>
Layouting is always hard, and usually, all you just want isto simply center a div. Flexbox API is great but has some confusing features (align-items or justify-content?). The Box component introduces a lean and straightforward API and exposes all the design tokens of the system (spacing, colors, shadows). This allows extending the system while reusing the tokens from the library.
<CardGalleryItem/>
At some point, you see in your system so many types of cards that make you crazy! You know you can do better to prevent the creation of it over and over again. The CardGalleryItem widget provides the common layout and features of a card that contains a media item (image, video), common actions buttons (primary, context menu), alongside visual enhancements such as promotional badge.
Pro Tip: Don’t be afraid to have such components in your library! Even if it is opinionated, people will adopt it since it saves them time and answers most of their needs.
<FileUpload/> (Bonus!)
I know that I said only 5, but actually, this is not a UI component but rather a mechanism! The FileUpload is not a specific button, but rather a logical feature we can attach to different types of buttons. For that, we created a configurable logic-only component that uses render props for a button to support a single or multiple file upload.
Pro Tip: If you’re a “React Hooks” fan, you can simply implement it as a hook and share it as part of your library.
Takeaway
Every library is unique, and every component is special. When deciding on which components should be improved, pick the ones which are the most commonly used and can significantly improve the quality of your users’ products.
Feel free to share your thoughts and your most beloved components ❤️
