Build eCommerce Storefronts faster

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

Get Started

play in the browser

Technologies we use

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.

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.

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.

Base Components: Beautiful, fast and fully accessible components like Input Checkbox Button that you can use to quickly build more complex structures
Blocks: Complex, copy-pasteable examples like ProductCard or checkout steps.
Composables / Hooks: Functions like useDropdown that abstract complex UI interactions.
Tailwind preset: Our preset adds SFUI-specific defaults and maps tailwind config to dynamic CSS variables for easier customization.
Typography: Small package that simplifies usage of third-party fonts.
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.