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

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.

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