Looking for the perfect UI library for an ecommerce page

What is a UI library?

In some cases, yes, we can and we already have tools for it like UI libraries. A UI library is a set of ready UI components that can be easily reused. It consists of elements like buttons, form inputs, and popups. They can be customized and combined to create a fully functional and attractive page. A good UI library should also offer great accessibility out of the box.

Is using a UI library always beneficial? Well, I guess opinions may differ but I would say no, you don’t always want a UI library. If your design was built with a certain UI library in mind or you just want your page to look nice and you don’t have particular requirements, then sure, go for it. But if you have a very unique design and you want to stick closely to it, building all styles from scratch may be a better choice. Overriding library styles may turn out to be just as time-consuming as starting from zero. And sometimes you need to load a heavy set of styles, icons and components that will be overridden anyway. On the other hand, the UI library can quickly fill gaps in your design (for example, you may have a very detailed PDP design prepared but you want your checkout just to look good and fit in with the rest of the page).

All in all, choosing the right UI library for your needs seems to be the key.

UI libraries in ecommerce

Ecommerce websites of course come with UI elements that are specific just to them. Product listings, a minicart, category filters, checkout - you will find them in all webshops. Can we build them with any UI library? Yes, sure we can, after all they all consist of the most basic UI elements: buttons, images, texts. But are there some UI libraries that make building these particular elements especially easy? Or do UI libraries created specifically for ecommerce exist?

Yes, they exist and I’ve found a couple of them. I decided to check how helpful they would be with building these elements that we often (or always) see on web stores (at the same time they are not as common as a button or popup):

• quantity input (with +/- buttons),
• rating input,
• product and shipping options (button checkboxes/radios),
• steps (to show the progress of the checkout process or status of the order).

UI libraries or kits dedicated to an ecommerce:

UI Storefront

Docs

It is a Vue UI library that was built for Vue Storefront but can be used in any Vue application. It uses atomic design concepts. It means that components are divided into three groups depending on their size. The smallest ones are atoms (for example buttons or icons). Molecules (menu, banner, gallery, etc.) are created from atoms, organisms (header, accordion, etc.) are created from molecules. It also offers quite a simple mechanism to customize your theme and it covers all use cases I’ve listed before. There are two types of product items (vertical and horizontal), there is a ready component for product options and for quantity input. I think it can be a nice solution if you build your store on Vue, whether you use Vue Storefront or not. Also: it’s open-source.

MDB eCommerce

Docs

MDB (Material Design for Bootstrap) is a UI library based on Bootstrap that follows the principles of Google’s Material Design. The free version more or less covers Bootstrap features, the Pro version offers much more, including many elements that can be extremely helpful when building an ecommerce site (such as ratings, stepper or range slider input). MDB Pro comes with a special kit for eCommerce, a set of ready-made sections prepared for web stores. The free version of MDB might not be especially well suited for ecommerce (not better than Bootstrap itself), but the Pro version is a different thing. It may be a nice solution for a bigger project.

Tailwind UI Ecommerce

Docs

Bootstrap Ecommerce

Bootstrap itself is probably the most popular UI library out there. Bootstrap Ecommerce is a kit that is meant to fill in gaps and make Bootstrap more ready for an ecommerce page. And it does it well, it covers most of my listed features (except for rating input). This kit is built on Bootstrap 4. Bootstrap 5 was released in May 2021 and a nice thing about it is that it doesn’t use jQuery as a dependency. Bootstrap Ecommerce looks like a nice UI kit but I would like to observe it and see if it transitions to Bootstrap 5 eventually. It’s a small project so it’s hard to say, we will see.

Universal UI libraries to an ecommerce

Any UI library can be helpful when building a web store, it doesn’t have to be created specifically for ecommerce. After all, each UI library should give you a useful set of UI elements that are used on almost every page. We do repeat the same patterns over and over again, so it shouldn’t matter much if you are building a list of blog posts or a list of products.

Some elements, however, are rather specific to web stores. So this time I’ve decided to check popular UI libraries and see how well suited they are for ecommerce. I’ve been looking particularly for these elements:

• rating input
• a number input with +/- buttons (for quantity)
• slider range input (with min and max at the same time, for choosing a price range)
• stepper

Universal (no framework)

Bootstrap

It is probably the most well-known UI library out there. Also, Bootstrap 5 doesn’t use jQuery anymore, which is great news. Unfortunately I don’t think “vanilla” Bootstrap is particularly well suited for ecommerce - the set of form components is quite extended and there are a lot of utility classes but, at the same time, a lot of useful elements are missing. Last time I wrote about Material Design Bootstrap, which is built on Bootstrap and has many more options, and Bootstrap Ecommerce, a special UI kit. You can always check them out instead.

Minified size: 57.7kB

Bulma

This is kind of a similar case to Bootstrap. It is a nice UI library that offers a lot of utilities and a sufficient set of UI elements. However, a lot of elements that could be useful in ecommerce are missing here. None of the UI elements I listed are covered in Bulma. There is a fine set of form elements but there are no rating, number, or range slider among them.

Minified size: 201.2kB

Libraries for React

Ant Design

Ant Design is truly powerful. When you browse its documentation, you may feel it has everything you may ever need and much more. It covers all of the elements I’ve listed except for rating but it also provides, for example, popconfirm, result (basically a ready-made order confirmation) or timeline. Of course it comes with a price, it is the heaviest library of all listed here. Still, it can be a good choice if you have a big project and you think this huge set of ready-made elements will come in handy. It was written in Typescript and there is also a community version for Vue.

Minified size: 1.2MB

MUI

MUI (previously known as Material-UI) is a very popular library and not without a reason. It offers a wide range of components but it’s not too heavy and big (so for me it looks like a nice compromise). It has a rating input, a range slider input and a stepper, the only missing thing is a number input for quantity.

Minified size: 425kB

React Suite

It's a rather big library with a very expansive set of components. Although it covers all elements that I listed and at the same time, it is twice smaller than Ant Design. It looks very promising with three themes (one high-contrast) and a couple of utilities.

Minified size: 634.3kB

Libraries for Vue

Vuetify

Vuetify is also quite a big, heavy and powerful library. It was built for Vue. It offers a range slider, a rating input and a stepper. The only missing thing from my list is the number input. Yet generally speaking, the range of components is rather impressive and there are also quite a lot of utility classes available.

Minified size: 697.6kB

Buefy

Yes, this is the Vue implementation of Bulma, the UI library that I mentioned earlier. However, it also extends Bulma, adding a few components that may be interesting for us. It provides a range slider input, a rating input and a nice number input that can be very useful for quantity. There is also a steps component. All in all it’s quite lightweight and, at the same time, it surprisingly covers all of my use cases.

Minified size: 271.9kB

There is no easy answer to the question of which UI library you should choose for ecommerce but I am sure that, while checking out UI kits and libraries created specifically for ecommerce is also worth a try, a well-prepared, more universal UI library should also cover all (or almost all) of your needs.

Package sizes are sizes of the latest version as of November 2021 (via https://bundlephobia.com/).