UX is gaining importance not only in terms of brand awareness but also conversion - all available data has left that issue without any doubts. Yet, for eCommerce businesses, it has been challenging to keep up with all the UX-trends without diving into time-consuming and expensive changes in the system’s architecture. Until now. Storefront UI is the answer to that demand

Storefront UI is an independent, Vue.js-based library of UI components such as buttons, galleries, search bars, etc., which enables businesses to build storefronts fast, efficiently, and without looking over their shoulder at the backend. Moreover, it is 100% customizable. Every single UI component, a complex module, or the whole design system can be flexibly adjusted to the personal preferences of a specific brand.

It was created as a complementary product to Vue Storefront. However, the general idea was always in line with the open-source’s spirit of broad accessibility, and so Storefront UI can be used not only in Vue Storefront but in any Vue project. Let’s dive into the details!

How was Storefront UI created?

Vue Storefront is less than two years old, but during this time many things on the web have already changed. That was one of the reasons why, a few months ago, we decide to redesign our default theme and create Capybara, a new theme for Vue Storefront.

This pretty soon sparked a lot of discussions. We started to ask how we can make it more useful to business, and we knew that it should be reusable, customizable and upgradeable. The Holy Grail, that we were looking for, was a UI components library delivered as a package on npm. Once we came to that realization, we simply had to get to work and find the right way to do it.

The decision about creating an open library has opened many doors for us. Thanks to that, we’ve gained components that we could use in Shopware PWA including the Vue Storefront integration dedicated to Shopware 6, Vue Storefront Next, our commercetools integration, and the creation of the new default theme to Vue Storefront which is named Capybara.

Introducing Storefront UI

Storefront UI is a 100% customizable components library dedicated to eCommerce. We tried to keep the balance between creating a ready-to-use, beautiful UI components library and ensuring full control over code. This makes Storefront UI a unique solution, as the other UI libraries on the market focus on just one of these aspects.

We decided to focus on 6 principles:

Storefront UI SfSelect Component desktop and the mobile look is different

Size of components needed for a full product page in StorefrontUI - 9kB Gzipped

Dedicated for eCommerce product component on example category page.

Where are we now in the project?

One of our projects based on Storefront UI is Capybara, the new default theme for Vue Storefront. We’ve been working hard on it but still need a little more time. You can check where we are on the Vue Storefront Roadmap.

But you don’t have to wait for us to finish it. Storefront UI is in stable BETA and you can add it as a dependency to your project. You must remember that our library should be transpiled and that in Vue Storefront project you should install Storefront UI in your theme directory.

yarn add @storefront-ui/vue`

Storefront UI will create a `sfui.scss` file for you in the root directory upon installation. You can use it to override SCSS variable.

After installation, you need to import root stylesheet. We recommended putting it in the root app component.

import “@storefront-ui/vue/styles.scss”`

That’s all! Now you can import any of the Storefront UI components to your Vue Storefront theme like this:

import { SfComponentName } from “@storefront-ui/vue”`

Only components that you will use will be bundled into your production code so you can even use it just for a single slider component. If you need more details, you can find them in our documentation.

If you want to know how Storefront UI components look and work, you can check our Storybook. Thanks to knobs, you can change props and immediately see how it affects the component. In addition to components, you can find a few awesome example pages like Home, Product or Category, which are ready to copy and use in your project.

Become a contributor

We are focusing on components, polishing, and our docs. We’re working hard to deliver the best UI library you’ve ever seen, for improved user experiences. As you may know, Storefront UI is an Open Source project; you can become a contributor and help with components, docs, a11y or tests. Check our contributing guide, go to GitHub, pick what you 💚 and be a part of our awesome community.

Storefront UI is great but it is just a component library. To build your modern store, you may need a little bit more magic and you can find it in our other projects. You may be interested in Vue Storefront Next and commercetools or Shopware 6 PWA.