11/16/2021

Looking for the perfect UI library for ecommerce, part 2

Author: Julia

In the last post I wrote about UI libraries and kits dedicated to ecommerce but I also mentioned that 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. With three themes (one high-contrast) and a couple of utilities, it looks very promising.

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/).

Related Posts

Contact with: Julia