{"id":13406426,"url":"https://github.com/vuestorefront/storefront-ui","last_synced_at":"2026-02-20T13:01:57.291Z","repository":{"id":36959989,"uuid":"167417059","full_name":"vuestorefront/storefront-ui","owner":"vuestorefront","description":"A frontend library for React and Vue that helps developers quickly build fast, accessible, and beautiful storefronts. Made with 💚 by Vue Storefront team and contributors.","archived":false,"fork":false,"pushed_at":"2025-03-18T19:43:21.000Z","size":101288,"stargazers_count":2378,"open_issues_count":38,"forks_count":454,"subscribers_count":65,"default_branch":"v2-develop","last_synced_at":"2025-05-11T03:47:29.071Z","etag":null,"topics":["ecommerce","javascript","pwa","react","storefront","storefront-theme","ui","ui-components","ui-kit","vue","vue-components","vuejs","vuejs2","vuejs3"],"latest_commit_sha":null,"homepage":"https://storefrontui.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vuestorefront.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-01-24T18:35:15.000Z","updated_at":"2025-05-09T12:10:20.000Z","dependencies_parsed_at":"2023-10-17T00:22:01.288Z","dependency_job_id":"e7252aec-0cbb-4654-85b5-4b7e6912e5c3","html_url":"https://github.com/vuestorefront/storefront-ui","commit_stats":{"total_commits":5338,"total_committers":148,"mean_commits":"36.067567567567565","dds":0.8049831397527164,"last_synced_commit":"bb7cc00f0086fe61e4fb4cc07fd37383240de747"},"previous_names":["divanteltd/storefront-ui"],"tags_count":200,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuestorefront%2Fstorefront-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuestorefront%2Fstorefront-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuestorefront%2Fstorefront-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vuestorefront%2Fstorefront-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vuestorefront","download_url":"https://codeload.github.com/vuestorefront/storefront-ui/tar.gz/refs/heads/v2-develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253514559,"owners_count":21920334,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ecommerce","javascript","pwa","react","storefront","storefront-theme","ui","ui-components","ui-kit","vue","vue-components","vuejs","vuejs2","vuejs3"],"created_at":"2024-07-30T19:02:29.969Z","updated_at":"2026-02-20T13:01:57.283Z","avatar_url":"https://github.com/vuestorefront.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/1626923/157498695-885de6c5-deba-416d-8287-51e7269aef56.png\" alt=\"Storefront UI\" /\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003e\n  Framework-agnostic UI library and Design System for eCommerce based on \u003ca href=\"https://tailwindcss.com/\"\u003eTailwindCSS\u003c/a\u003e.\n\u003c/h3\u003e\n\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://discord.gg/vuestorefront\"\u003e\n      \u003cimg alt=\"Chat with us on Discord\" src=\"https://img.shields.io/discord/770285988244750366?label=join%20discord\u0026logo=Discord\u0026logoColor=white\" /\u003e\n  \u003c/a\u003e\n  \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/@storefront-ui/vue\"\u003e\n  \u003ca href=\"http://commitizen.github.io/cz-cli/\"\u003e\n      \u003cimg alt=\"Commitizen friendly\" src=\"https://img.shields.io/badge/commitizen-friendly-brightgreen.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/vuestorefront/storefront-ui\"\u003e\n      \u003cimg alt=\"License\" src=\"https://img.shields.io/github/license/vuestorefront/storefront-ui\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/vuestorefront/storefront-ui/pulls\"\u003e\n      \u003cimg alt=\"PRs Welcome\" src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003chr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://docs.storefrontui.io/v2/vue/getting-started.html\"\u003e\u003cimg alt=\"Vue Installation\" height=\"40\" width=\"120\" src=\"./_readme/vuebtn.svg\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://docs.storefrontui.io/v2/react/getting-started.html\"\u003e\u003cimg alt=\"React Installation\" height=\"40\" width=\"120\" src=\"./_readme/reactbtn.svg\" /\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cimg src=\"./_readme/showcase.png\"\u003e\n\n## What problems does Storefront UI solve?\n\nLike any UI Library / Design System the main goal of Storefront UI is to **accelerate the development process** by providing an opinionated set of premade components, utilities and patterns.\n\nThere is a lot of the things you have to take care of to build good user interfaces:\n\n🔹 **Developer/Designer workflow** - Storefront UI comes out of the box with Figma files - a pixel-perfect representation of your code that your design and engineering teams needs to stay aligned.\n\n🔹 **Performance** - Poorly written and overcomplicated components are often the performance bottleneck ruining the experience of your users. **All standard eCommerce pages that we've built with Storefront UI hit 95-100 on Lighthouse**! (mobile performance measured using [PSI](https://pagespeed.web.dev/))\n\n🔹 **Accessibility** -  Web accessibility is more than an ethical requirement in the United States: [it’s also legally mandated](https://adasitecompliance.com/website-accessibility-legal-requirement/) and you risk fines if the justice department determines your website is non-compliant. At the same time building accessible components takes a lot of time and requires specific domain knowledge. **Storefront UI components are WCAG AA compliant out of the box!**\n\nBut let's be honest, almost all established UI libraries can solve that. **Here's what's Storefront UI is best at::**\n\n🔸 **Customization** -  Most of the UI libraries out there fail when components need to be heavily customized. You suddenly find yourself working against your library just to achieve the desired look. Storefront UI is built for complex cases. We ship a set of small and flexible _base components_ like `Button`, `Checkbox` or `Modal` that can be used to build more complex ones. We also deliver more complex examples (aka _Blocks_) like `ProductCard` or a different checkout steps as copy-pasteable code using Storefront UI components and Tailwind utilities.\n\nIn addition, Storefront UI fits perfectly complex UI setups where one library is inherited and customized by multiple projects differing visually.\n\n🔸 **Scaling** - The more your application grows the less maintainable your UI becomes. By providing the right building blocks and using Tailwind CSS we made sure that your UI will be easy to maintain and won't negatively impact your performance even on a large scale.\n\n🔸 **Focus on eCommerce** - Storefront UI comes out of the box with components specific to eCommerce like `ProductCard`, `QuantitySelector` and even checkout components\n\n## What comes out of the box? 🎁\n\n- **Base Components** - beautiful, fast and fully accessible components like `Input` `Checkbox` `Button` that you can use to quickly build more complex structures\n- **Blocks** - complex, copy-pasteable examples like `ProductCard` or checkout steps.\n- **Composables** like `useDropdown` that abstract complex UI interactions\n- **Tailwind preset** that maps tailwind config to CSS variables and provides few SFUI-specific defaults\n- **Typography** package simplifying usage of 3rd party fonts\n- **Figma** file with pixel-perfect representation of SFUI components based on tailwind properties\n\n\u003ca href=\"https://www.figma.com/design/ZxaUFeSq1XYvR8v8eqTrJU/SFUI-2-%7C-Design-Kit-v2.7--public-?node-id=22913-91045\u0026p=f\u0026t=Y3eoI5dyw6cRAzVk-0\"\u003e\u003cimg src=\"./_readme/figma_included.png\"\u003e\u003c/a\u003e\n\n## Contributing\n\nWe believe that the best software is made when a lot of people with different views collaborate on it. We welcome all contributions to Storefront UI.\n\nYou can become contributor not only by writing code:\n\n- Contribute to documentation\n- Write an article or tutorial\n- Help others on our [Discord server](https://discord.vuestorefront.io)\n- Report a bug\n- Do a talk about Storefront UI at your local meetup\n\nWe are grateful for all kind of contributions. If you don't know where to start check out our [contribution guide](./CONTRIBUTING.md) or ask for help on [Discord](https://discord.vuestorefront.io)\n\n## How to run project locally\n\nIn the `root` directory of this project run `yarn` command to install all needed dependencies.\nAfter dependencies has been installed run `yarn dev` command to run this project.\nNow both (Nuxt preview for Vue and Next preview for React) projects are running locally and you can start working on them.\nIf you need to run only one of them, you need to run a desired preview from its directory, so you need to go for Vue: `/apps/preview/nuxt` and for React: `/apps/preview/next`.\n\nNOTE:\nSubdependencies have to be build, such as\n- `@storefront-ui/shared` located in `/packages/sfui/shared`\n- `@storefront-ui/tw-plugin-peer-next` located in `/packages/sfui/tw-plugin-peer-next`\n- `@storefront-ui/typography` located in `/packages/sfui/typography`\n\nKnowing this we recommend using `yarn dev` in `root` directory.\n\n## Links\n\n- [Documentation](https://docs.storefrontui.io/v2/)\n- [Playground Vue](https://play-vue.vuestorefront.io)\n- [Playground React](https://play-react.vuestorefront.io)\n- [Discord](https://discord.vuestorefront.io)\n- [Alokai](https://vuestorefront.io)\n","funding_links":[],"categories":["TypeScript","Vue","vuejs","javascript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuestorefront%2Fstorefront-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvuestorefront%2Fstorefront-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvuestorefront%2Fstorefront-ui/lists"}