storefront-ui
eCommerce
JavaScript
The first Vue.js UI library dedicated to eCommerce
Create stunning, mobile-first online stores with this 100% customizable design system.
<p>
</a>
</p>
<p>
<a rel="nofollow noopener" target="_blank" href="https://camo.githubusercontent.com/cda2f43f8bdb7c55c7e5b0822cf2ab696109203883395e8398ca64c45897f5fa/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f4073746f726566726f6e742d75692f767565"></a><br /> <a rel="nofollow noopener" target="_blank" href="http://commitizen.github.io/cz-cli/"></p>
<p>
</a>
</p>
<blockquote>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-techforukraine" class="anchor" aria-hidden="true" href="#techforukraine"></a>#TechForUkraine
</h1>
<p>
<a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/1626923/155853691-d6d0a541-d3b9-40bf-b8f5-2d38303e9e49.png"></a>
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-russias-military-aggression-against-ukraine" class="anchor" aria-hidden="true" href="#russias-military-aggression-against-ukraine"></a><strong>Russia’s military aggression against Ukraine.</strong><br />
</h2>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-how-can-you-support-ukrainian-civil-society" class="anchor" aria-hidden="true" href="#how-can-you-support-ukrainian-civil-society"></a>How can you support Ukrainian civil society?
</h3>
<p>
All help is needed. If you are not able to help locally, by sheltering a fellow Ukrainian, you can also:
</p>
<ul dir="auto">
<li>
Support the Ukraine Armed forces directly by sending funding to the special accounts.<br /> <a rel="nofollow noopener" target="_blank" href="https://bank.gov.ua/en/news/all/natsionalniy-bank-vidkriv-spetsrahunok-dlya-zboru-koshtiv-na-potrebi-armiyi">NBU Special Account to Raise Funds for Ukraine’s Armed Forces</a>
</li>
<li>
Help the ICRC (Red Cross) with donations.<br /> <a rel="nofollow noopener" target="_blank" href="https://www.icrc.org/en/where-we-work/europe-central-asia/ukraine">Ukrainian<br /> Red Cross Society</a>
</li>
<li>
Donate to the United Help Ukraine.<br /> <a rel="nofollow noopener" target="_blank" href="https://unitedhelpukraine.org/">United Help Ukraine</a>
</li>
<li>
Donate to Voices of Children<br /> <a rel="nofollow noopener" target="_blank" href="https://voices.org.ua/en/">Voices of Children</a>
</li>
</ul>
</blockquote>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-links" class="anchor" aria-hidden="true" href="#links"></a>Links
</h2>
<ul dir="auto">
<li>
🖥 WebSite: <a rel="nofollow noopener" target="_blank" href="http://storefrontui.io/">http://storefrontui.io/</a>
</li>
<li>
📘 Documentation: <a rel="nofollow noopener" target="_blank" href="http://docs.storefrontui.io/">http://docs.storefrontui.io/</a>
</li>
<li>
👥 Discord Community: <a rel="nofollow noopener" target="_blank" href="https://discord.gg/vuestorefront/">https://discord.gg/vuestorefront/</a>
</li>
<li>
🐦 Twitter: <a rel="nofollow noopener" target="_blank" href="https://twitter.com/StorefrontUI">https://twitter.com/StorefrontUI</a>
</li>
<li>
🎥 YouTube: <a rel="nofollow noopener" target="_blank" href="https://www.youtube.com/c/VueStorefront">https://www.youtube.com/c/VueStorefront</a>
</li>
</ul>
<p>
<a rel="nofollow noopener" target="_blank" href="https://camo.githubusercontent.com/8d94e2f15073437d87a1d7b1991f4df42cead4d0a48ac078fb6ef51a5b480440/68747470733a2f2f692e6962622e636f2f3753635670744e2f3132332e706e67"></a>
</p>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-techforukraine-1" class="anchor" aria-hidden="true" href="#techforukraine-1"></a>#TechForUkraine
</h1>
<p>
<a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/1626923/155853691-d6d0a541-d3b9-40bf-b8f5-2d38303e9e49.png"></a>
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-russias-military-aggression-against-ukraine-1" class="anchor" aria-hidden="true" href="#russias-military-aggression-against-ukraine-1"></a><strong>Russia’s military aggression against Ukraine.</strong><br />
</h2>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-how-can-you-support-ukrainian-civil-society-1" class="anchor" aria-hidden="true" href="#how-can-you-support-ukrainian-civil-society-1"></a>How can you support Ukrainian civil society?
</h3>
<p>
All help is needed. If you are not able to help locally, by sheltering a fellow Ukrainian, you can also:
</p>
<ul dir="auto">
<li>
Support the Ukraine Armed forces directly by sending funding to the special accounts.<br /> <a rel="nofollow noopener" target="_blank" href="https://bank.gov.ua/en/news/all/natsionalniy-bank-vidkriv-spetsrahunok-dlya-zboru-koshtiv-na-potrebi-armiyi">NBU Special Account to Raise Funds for Ukraine’s Armed Forces</a>
</li>
<li>
Help the ICRC (Red Cross) with donations.<br /> <a rel="nofollow noopener" target="_blank" href="https://www.icrc.org/en/where-we-work/europe-central-asia/ukraine">Ukrainian Red Cross Society</a>
</li>
<li>
Donate to the United Help Ukraine.<br /> <a rel="nofollow noopener" target="_blank" href="https://unitedhelpukraine.org/">United Help Ukraine</a>
</li>
<li>
Donate to Voices of Children<br /> <a rel="nofollow noopener" target="_blank" href="https://voices.org.ua/en/">Voices of Children</a>
</li>
</ul>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-stay-connected" class="anchor" aria-hidden="true" href="#stay-connected"></a>Stay connected
</h3>
<p>
<a rel="nofollow noopener" target="_blank" href="https://camo.githubusercontent.com/bfcd36c9fd3196f7da8045780fd1434dc706bc31b225289a252b78ef63c3381b/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f76756573746f726566726f6e742f7675652d73746f726566726f6e743f7374796c653d736f6369616c"></a><br /> <a rel="nofollow noopener" target="_blank" href="https://camo.githubusercontent.com/9822783044eca59135c774addc88eed95820a8acf4ce657f7e1cdc6f43069d03/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f76756573746f726566726f6e743f7374796c653d736f6369616c"></a><br /> <a rel="nofollow noopener" target="_blank" href="https://camo.githubusercontent.com/138d00b4c727adadd8177fa22b4bfd57fac202dba20617534c0112ba233502bf/68747470733a2f2f696d672e736869656c64732e696f2f796f75747562652f6368616e6e656c2f73756273637269626572732f55436b6d31463343676c74793343453151774b51556868673f7374796c653d736f6369616c"></a><br /> <a rel="nofollow noopener" target="_blank" href="https://discord.vuestorefront.io"></a>
</p>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-storefront-ui" class="anchor" aria-hidden="true" href="#storefront-ui"></a>Storefront UI
</h1>
<p>
<strong>Current status:</strong> Stable beta!<br /> Customization-first, performance-oriented and elegant UI framework for eCommerce (and not only) based on Vue.js and <a rel="nofollow noopener" target="_blank" href="https://services.google.com/fh/files/events/pdf_retail_ux_playbook.pdf">Google Retail UX Playbook</a>. Made with ❤️ by Vue Storefront team and contributors.
</p>
<ul dir="auto">
<li>
<a rel="nofollow noopener" target="_blank" href="http://storefrontui.io/">Website</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="http://docs.storefrontui.io/">Storybook documentation</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://docs.storefrontui.io/?path=/story/contributing-guide-guide-become-a-contributor--page">How to contribute</a>
</li>
<li>
<a rel="nofollow noopener" target="_blank" href="https://discord.com/invite/TJpdzzN6q5">Discord server</a>
</li>
</ul>
<p>
Customization-first, performance-oriented and elegant UI framework for eCommerce (and not only) based on Vue.js and <a rel="nofollow noopener" target="_blank" href="https://services.google.com/fh/files/events/pdf_retail_ux_playbook.pdf">Google Retail UX Playbook</a>.
</p>
<p>
Made with ❤️ by Vue Storefront team and contributors.
</p>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-what-makes-it-unique" class="anchor" aria-hidden="true" href="#what-makes-it-unique"></a>What makes it unique?
</h1>
<p>
Some libraries aim to give as much as they can out of the box but they fail when it comes to customization and performance. Our goal was to enable as much as possible out of the box but with primary focus on ability to customize any aspect of the components.<br /> With SfUI you can change almost every aspect of provided components and use them to make stunning eCommerce shops (and not only)!<br /> <a rel="nofollow noopener" target="_blank" href="https://camo.githubusercontent.com/5e44d945fe332e31a78af2f8345cdb3aae2de666aa3619ca81f67da7ff2187f8/68747470733a2f2f692e6962622e636f2f37534b627a354b2f3132333435372e706e67"></a>
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-here-are-the-key-characteristics-of-storefront-ui" class="anchor" aria-hidden="true" href="#here-are-the-key-characteristics-of-storefront-ui"></a>Here are the key characteristics of Storefront UI:
</h2>
<p>
We are building Storefront UI based on the following 6 fundamentals:
</p>
<ul dir="auto">
<li>
<strong>Customization</strong>: Along with standard prop-based customization, every component has a set of slots that let you replace any part of it with your own images, icons or even custom HTML markup.
</li>
<li>
<strong>Mobile-first</strong>: Every Storefront UI component is highly optimized for mobile user experience and in many cases behaves completely different on desktop and mobile. Select list becomes full-screen drop-down, tabs are becoming accordion, etc.
</li>
<li>
<strong>Performance</strong>: You’re importing ONLY what you need, and in a raw format which means you can benefit from all build-time optimizations like tree-shaking or grouping common chunks. Unused components are tree-shaken and global CSS is just < 0,1 kB unminified. Thanks to this, the initial footprint of the library is unnoticeable. You can use the library for as many components you may want, even a single slider. You bundle only what you import.
</li>
<li>
<strong>Best practices</strong>: Storefront UI components follow best practices in terms of design and core. Every component is based on the Google Retail UX Playbook and is accessibility-friendly.
</li>
<li>
<strong>E-commerce</strong>: As a UI library dedicated to eCommerce, Storefront UI along with standard UI components has all the elements necessary for building modern online stores.
</li>
<li>
<strong>Open Source</strong>: Storefront UI is a community effort to deliver the best possible experience to modern web applications and e-commerce shops, with carefully crafted components following best practices. Our team consists of agencies and volunteer contributors from all over the world.
</li>
</ul>
<p>
Storefront UI is based on atomic design which means every component is built from tiny atoms that you can use in your application! You’re not limited to big UI components anymore. Use Storefront UI atoms to quickly build your own, great-looking components!<br /> Read <a rel="nofollow noopener" target="_blank" href="https://docs.storefrontui.io/?path=/story/setup-css-customization--page">how it can be customized</a>.<br /> <a rel="nofollow noopener" target="_blank" href="https://camo.githubusercontent.com/d30c2f93a6ed2bf6dc64bfe6d98254d15efc90048fc0f948309c151318962c19/68747470733a2f2f692e6962622e636f2f564854637972772f313233342e706e67"></a>
</p>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-design" class="anchor" aria-hidden="true" href="#design"></a>Design
</h1>
<p>
You can find the stunning designs we are using for Storefront UI components <a rel="nofollow noopener" target="_blank" href="https://www.figma.com/file/N0Ct95cSAoODNv7zYS01ng/Storefront-UI-%7C-Design-System?node-id=127%3A1054">here</a>.<br /> <a rel="nofollow noopener" target="_blank" href="https://www.youtube.com/watch?v=8FO6tm9rEdo&feature=youtu.be"><br /> </a>
</p>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-contributing" class="anchor" aria-hidden="true" href="#contributing"></a>Contributing
</h1>
<p>
We are currently in the process of building the library. If you want to help in shaping the future of Vue and eCommerce UI’s we’d be more than happy if you want to contribute! <a rel="nofollow noopener" target="_blank" href="https://docs.storefrontui.io/?path=/story/contributing-guide-guide-become-a-contributor--page">Here</a> you can find all the required information.
</p>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-supporters" class="anchor" aria-hidden="true" href="#supporters"></a>Supporters
</h1>
<p>
<a rel="nofollow noopener" target="_blank" href="https://divante.com"><br /> </a><br /> <br /> <a rel="nofollow noopener" target="_blank" href="https://developers.e-com.plus/"></p>
<p>
</a><br /> <a rel="nofollow noopener" target="_blank" href="https://cloudinary.com"></p>
<p>
</a>
</p>
<h1 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-contributing-1" class="anchor" aria-hidden="true" href="#contributing-1"></a>Contributing
</h1>
<p>
Read <a rel="nofollow noopener" target="_blank" href="https://docs.storefrontui.io/?path=/story/contributing-guide-guide-become-a-contributor--page">how to start</a> and become a part of our amazing community 😉<br />
</p>