Build E-Commerce apps faster with Storefront UI

Just to be clear, I am not a huge fan of UI Component libraries. I had pretty bad experiences while working in projects that were using component libraries such as Vuetify in a very wrong way. This resulted in almost not maintainable project that was using legacy components and in order to migrate we would need to start the project from scratch.

Don't get me wrong, UI component libraries are useful and can help you a lot but they should be used in a right way. Otherwise, you will end up writing so called dirty hacks to make the components work the way you want.

Few months ago, I discovered project called Headless UI and I instantly liked the idea.

Logic, semantics, Accessibility delivered to your doors in a way that you would only or mainly need to style it the way you want (with TailwindCSS for example).

Few months later at Vue Storefront quarters, inspired by the idea of Headless UI we have released our new version of Storefront UI 🚀

In this article, I will introduce you to this amazing library that works not only for Vue.js but also React (not including the community versions for Angular and Qwik) ⚡️

Library

Storefront UI is fast, accessible, and fully customizable components built for e-commerce. It works for both Vue an React, and soon it will work also for Angular and Qwik! 🚀

You can check the full documentation here

The previous version of Storefront UI was following the Atomic Design in which components are grouped into three main areas; Atoms, Molecules, Organisms. At the time, when Storefront UI was created, this idea was really cool and helped us create stable and useful library.

We realised that these more complex components like ProductCard would require hundreds of props and slots to allow users to build their e-commerce apps with them. So with this new version, we decided to take a bit different path.

The library itself delivers mainly these atomic components (now called Base) and for all these more advanced components (now called Blocks) instead of shipping them directly into your code, we are delivering a code examples that you can easily copy and add to your project.

This solution has proven to be much more useful for the developers who can customize the layout and functionality the way they want instead of be locked in to how we developed these components.

Ahh, and I forgot to mention that you can also use the Figma file that is 1:1 with the current version of the component library. Thanks to this your designers can create an e-commerce application in Figma and developers can use exactly the same components in the real application. Check out the Figma file here

Code

Using the actual library in code is really enjoyable. You either import the component directly in your application like:

<template>
  <div class="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
    <SfButton size="sm">Hello</SfButton>

    <SfButton>Hello</SfButton>

    <SfButton size="lg">Hello</SfButton>
  </div>
</template>

<script lang="ts" setup>
import { SfButton } from '@storefront-ui/vue';
</script>

Or copy an example ProductCard like:

<template>
  <div class="border border-neutral-200 rounded-md hover:shadow-lg max-w-[300px]">
    <div class="relative">
      <SfLink href="#" class="block">
        <img
          src="https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/production/sneakers.png"
          alt="Great product"
          class="block object-cover h-auto rounded-md aspect-square"
          width="300"
          height="300"
        />
      </SfLink>
      <SfButton
        variant="tertiary"
        size="sm"
        square
        class="absolute bottom-0 right-0 mr-2 mb-2 bg-white ring-1 ring-inset ring-neutral-200 !rounded-full"
        aria-label="Add to wishlist"
      >
        <SfIconFavorite size="sm" />
      </SfButton>
    </div>
    <div class="p-4 border-t border-neutral-200">
      <SfLink href="#" variant="secondary" class="no-underline"> Athletic mens walking sneakers </SfLink>
      <div class="flex items-center pt-1">
        <SfRating size="xs" :value="5" :max="5" />

        <SfLink href="#" variant="secondary" class="pl-1 no-underline">
          <SfCounter size="xs">123</SfCounter>
        </SfLink>
      </div>
      <p class="block py-2 font-normal leading-5 typography-text-sm text-neutral-700">
        Lightweight • Non slip • Flexible outsole • Easy to wear on and off
      </p>
      <span class="block pb-2 font-bold typography-text-lg">$2345,99</span>
      <SfButton size="sm">
        <template #prefix>
          <SfIconShoppingCart size="sm" />
        </template>
        Add to cart
      </SfButton>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { SfRating, SfCounter, SfLink, SfButton, SfIconShoppingCart, SfIconFavorite } from '@storefront-ui/vue';
</script>

Either way, the experience of using the library is really good!

Apart from the components themselves, you also get access to several useful composables like useTrapFocus that allows you to trap focus inside a specific DOM element. You can use it in your application like following.

<script lang="ts" setup>
import { ref } from 'vue';
import { useTrapFocus } from '@storefront-ui/vue';

const focusTrapElementRef = ref<HTMLDivElement>();
useTrapFocus(focusTrapElementRef)
</script>

<template>
  <div ref="focusTrapElementRef">
    This container has <a href="#">Focusable anchor</a> and another <button>Focusable button</button> or <span class="focus:outline" tabindex="0">Focusable span</span>
  </div>
</template>

And most importantly, it comes with the support for TailwindCSS and advanced theming that allows you to easily modify the default theme and adjust it to match your needs!

There is a great video by Rick about how you can override the default styles easily:

Check out all the available theming options here

Bonus

Storefront UI is aimed to help developers build e-commerce applications, but you could also use it in several different types of applications. Take a look at the following articles where I am showing how to use Storefront UI for Algolia and Storyblok:

1. Creating Engaging Content in Nuxt with Storyblok & Storefront UI -> https://www.storyblok.com/tp/creating-engaging-content-with-nuxt-and-storefront-ui
2. Building a performant search bar in Nuxt with Algolia & Storefront UI -> https://www.algolia.com/blog/engineering/building-a-performant-search-bar-in-nuxt-with-algolia-storefront-ui/

Summary

I really like working with Storefront UI. It is a much better project than the version 1.0 and I highly recommend you to try it out as it is easy to use, while it delivers a lot of value!