NewComposable Commerce Trends 2024: Executive Report – the latest industry insights!
DOWNLOADarrow-right
vsf_logo.svg
github-star-nav-top.svg

Build eCommerce Storefronts faster

Storefront UI is an open-source frontend library that helps developers to build fast, accessible, and beautiful storefronts much quicker.

sfui-hero.png

Technologies we use

vue_logo.svg
react_logo.svg
ts-lettermark-white.svg
tailwindcss-logotype.svg
figma_logo.svg

Compose your UI

Storefront UI offers simple base elements like Buttons, Checkboxes, and Modals for creating more advanced components. It also provides copy-pasteable complex examples (Blocks) such as ProductCards using Storefront UI elements and Tailwind tools.

components_grid.png

Built with Tailwind CSS

All Storefront’s UI components are built with the utility classes from Tailwind CSS. You can easily change all of the predefined clasess or use Storefront UI components in existing Tailwind project.

code_sfui_(1).svg

Built for complex use cases

Fast

All Storefront UI components are built using Tailwind CSS utility classes. You can effortlessly modify predefined classes or integrate Storefront UI components into an existing Tailwind project.

Accessible

In the US, web accessibility is not only an ethical obligation but also a legal requirement. Non-compliance may result in fines. Storefront UI components ensure WCAG AA compliance, mitigating this risk.

Customizable

Tired of artificial extension points for your components? With Storefront UI you have direct access to the source code of every component.

Open Source

Storefront UI is a 100% Free and open-source project boasting nearly 100 contributors from around the world.

TypeScript

Each component and utility in Storefront UI is fully typed, ensuring an exceptional developer experience and type safety for added reliability.

React & Vue

Storefront UI components work out of the box with React and Vue.js 3

What comes out of the box?

Our goal is to provide you with a strong foundation for your own, custom Design system and UI library and do all the repetitive groundwork for you, so you can focus on making things that make you stand out from others.

Brand_iconstorefront6.svg

Base Components

Beautiful, fast and fully accessible components like Input Checkbox Button that you can use to quickly build more complex structures

checkout-icon.png

Blocks

Complex, copy-pasteable examples like ProductCard or checkout steps.

features-icon-1.svg

Composables / Hooks

Functions like useDropdown that abstract complex UI interactions.

catgeory-icon.png

Tailwind preset

Our preset adds SFUI-specific defaults and maps tailwind config to dynamic CSS variables for easier customization.

support.svg

Typography

Small package that simplifies usage of third-party fonts.

Brand_iconstorefront1.svg

Figma

Pixel-perfect representation of SFUI components based on tailwind properties for your design team.

Built for modern use cases

Design Systems and Design Thinking are no longer interesting new concepts, but industry standards. Tools for designers are evolving and allowing bigger unification with code, and the components are no longer a weapon of a developer, but a marketer building pages in a headless CMS. Storefront UI fits perfectly into modern workflows.

modern.png

Just try it out!

Check out our interactive playground and try Storefront UI in the browser!