Build eCommerce Storefronts faster
Storefront UI is an open-source frontend library that helps developers to build fast, accessible, and beautiful storefronts much quicker.
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
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.
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.
Tired of artificial extension points for your components? With Storefront UI you have direct access to the source code of every component.
Storefront UI is a 100% Free and open-source project boasting nearly 100 contributors from around the world.
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.
Beautiful, fast and fully accessible components like Input Checkbox Button that you can use to quickly build more complex structures
Complex, copy-pasteable examples like ProductCard or checkout steps.
Composables / Hooks
Functions like useDropdown that abstract complex UI interactions.
Our preset adds SFUI-specific defaults and maps tailwind config to dynamic CSS variables for easier customization.
Small package that simplifies usage of third-party fonts.
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.
Just try it out!
Check out our interactive playground and try Storefront UI in the browser!