{"id":39487131,"url":"https://github.com/vtex-apps/store-components","last_synced_at":"2026-01-18T05:27:38.360Z","repository":{"id":37548398,"uuid":"128788377","full_name":"vtex-apps/store-components","owner":"vtex-apps","description":"Default VTEX store components","archived":false,"fork":false,"pushed_at":"2025-10-13T17:13:05.000Z","size":8172,"stargazers_count":55,"open_issues_count":40,"forks_count":151,"subscribers_count":55,"default_branch":"master","last_synced_at":"2025-10-23T19:33:48.878Z","etag":null,"topics":["hacktoberfest","srv-store-framework","store-framework","vtex-io","xp-developer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vtex-apps.png","metadata":{"files":{"readme":"docs/README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-04-09T14:53:41.000Z","updated_at":"2025-10-13T17:13:08.000Z","dependencies_parsed_at":"2024-04-30T20:57:55.317Z","dependency_job_id":"8daf1321-64c4-402a-ba92-be66e0446070","html_url":"https://github.com/vtex-apps/store-components","commit_stats":null,"previous_names":["vtex-apps/npm-storecomponents"],"tags_count":780,"template":false,"template_full_name":null,"purl":"pkg:github/vtex-apps/store-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fstore-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fstore-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fstore-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fstore-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex-apps","download_url":"https://codeload.github.com/vtex-apps/store-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex-apps%2Fstore-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28530810,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T00:39:45.795Z","status":"online","status_checked_at":"2026-01-18T02:00:07.578Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["hacktoberfest","srv-store-framework","store-framework","vtex-io","xp-developer"],"created_at":"2026-01-18T05:27:38.279Z","updated_at":"2026-01-18T05:27:38.329Z","avatar_url":"https://github.com/vtex-apps.png","language":"JavaScript","readme":"\u003e📢 **Disclaimer** Don't fork this project. Use it, [contribute](https://github.com/vtex-apps/store-components) to it or open issues through [Store Discussion](https://github.com/vtex-apps/store-discussion) to help us evolve it.\n\n# VTEX Store Components\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-17-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\nVTEX Store Components is a collection of components that can be used to create/extend others VTEX apps.\n\n\n- [VTEX Store Components](#vtex-store-components)\n  - [Usage](#usage)\n  - [Styles API](#styles-api)\n  - [Components](#components)\n  - [Creating a new component](#creating-a-new-component)\n    - [Project structure](#project-structure)\n  - [Troubleshooting](#troubleshooting)\n  - [Contributing](#contributing)\n  - [Tests](#tests)\n    - [Travis CI](#travis-ci)\n  - [Contributors](#contributors)\n\n## Usage\n\nThe Store Components collection uses the `store` builder with the blocks architecture. Please refer to our [Builder](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-builders) documentation to learn more about the `store` builder. \n\nTo use this app, you must import it as dependency of your project in the `manifest.json` file.\n\n```json\n  \"dependencies\": {\n    \"vtex.store-components\": \"3.x\"\n  }\n```\n\nThen, you can start adding components to your store theme app.\n\n## Styles API\n\nThe Store Components collection provides some CSS classes as an API for style customization.\n\nTo use this CSS API, you must add the `styles` builder and create an app styling CSS file.\n\n1. Add the `styles` builder to your `manifest.json`:\n\n```json\n  \"builders\": {\n    \"styles\": \"2.x\"\n  }\n```\n\n2. Create a file called `vtex.store-components.css` inside the `styles/css` folder. Add your custom styles:\n\n```css\n.container {\n  margin-top: 10px;\n}\n```\n\n## Components\n\nFor more information, check the documentation of all components of the Store Components collection.\n\n- [Availability Subscriber](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-availabilitysubscriber)\n- [Back To Top Button](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-backtotopbutton)\n- [Buy Button](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-buybutton)\n- [Image](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-image)\n- [InfoCard](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-infocard)\n- [Logo](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-logo)\n- [Newsletter](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-newsletter)\n- [Product Brand](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productbrand)\n- [Product Description](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productdescription)\n- [Product Images](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productimages)\n- [Product Name](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productname)\n- [Product SKU Attributes](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productskuattributes)\n- [Product Price](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productprice)\n- [Product Specifications](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-productspecifications)\n- [SKU Selector](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-skuselector)\n- [Search Bar](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-searchbar)\n- [Share](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-share)\n- [Shipping Simulator](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-shippingsimulator)\n- [Notification](https://developers.vtex.com/vtex-developer-docs/docs/vtex-store-components-notification)\n\n\n\u003e ⚠️ Warning\n\u003e\n\u003e **The following blocks have been deprecated:** `Animation`, `Categories Highlights`, `Collection Badges`, `Container`, `Discount Badge`, `Gradient Collapse`, `Greeting`, `Slider`. Despite this, support for them is still granted.\n\n## Creating a new component\n\nTo start your development, create a new folder on react/components. That's where your source code will be stored. Also create a new js file on /react, this file should be used to expose your component, like:\n\n### Project structure\n\nInside your `react/components/\u003ccomponent_name\u003e` you should have:\n\n- index.js\n- README.md\n- [Optional] components/\n- [Optional] constants/\n- [Optional] utils/\n- [Optional] queries/\n- [Optional] mutations/\n- [Optional] styles.css\n\nNext, inside of `react/` folder you need to export your component, such as:\n\n```js\nimport ProductPrice from './components/ProductPrice/index'\n\nexport default ProductPrice\n```\n\nAlso, all dependencies needed should be inserted inside the react/package.json.\n\n## Troubleshooting\n\nYou can check if others are passing through similar issues [here](https://github.com/vtex-apps/store-components/issues). Also feel free to [open issues](https://github.com/vtex-apps/store-components/issues/new) or contribute with pull requests.\n\n## Contributing\n\nCheck it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.\n\n## Tests\n\nTo execute our tests go to `react/` folder and run `yarn test`\n\n### Travis CI\n\n[![Build Status](https://api.travis-ci.org/vtex-apps/store-components.svg?branch=master)](https://travis-ci.org/vtex-apps/store-components)\n\n\u003c!-- DOCS-IGNORE:start --\u003e\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/hapoza\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/27775611?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=hapoza\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/JNussens\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/7662734?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJean Nussenzveig\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=JNussens\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/lucasayb\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/17356081?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLucas Antônio Yamamoto Borges\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=lucasayb\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://t.co/LTjWBxRnqE\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/28419764?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSebastian Sanchez Vega\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=sebaskun98\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Erislandio\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/34255207?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eErislandio\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=Erislandio\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/BeatrizMiranda\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/28959326?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBeatriz Miranda\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=BeatrizMiranda\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Jayendra88\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/2637457?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJayendra\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=Jayendra88\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/pgrimaud\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/1866496?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePierre Grimaud\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=pgrimaud\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.linkedin.com/in/igorpoubel\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/6241622?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eIgor Poubel\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=igorpoubel\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.hugoccosta.com\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/20212776?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHugo Costa\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=hugocostadev\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/MatheusR42\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/16908590?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMatheus Araujo\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=MatheusR42\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/LuisaFCorrea\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/66276121?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLuisa Correa\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=LuisaFCorrea\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/pmarignan\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/32361926?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003epmarignan\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=pmarignan\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/rcmuniz1994\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/32344098?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRodrigo Muniz\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=rcmuniz1994\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/ovio224\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/68231117?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOvi\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=oviolion\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/LucasCastroJussi\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/80407814?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLucasCastroJussi\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=LucasCastroJussi\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://razvanudrea.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/71461884?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003erazvanudream\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vtex-apps/store-components/commits?author=razvanudream\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n\u003c!-- DOCS-IGNORE:end --\u003e\n\n**Upcoming documentation:**\n\n - [Render logo as amp-img if in AMP page](https://github.com/vtex-apps/store-components/pull/580)\n - [Update CSS handles on ProductSpecification](https://github.com/vtex-apps/store-components/pull/599)\n\n - [Including classes on searchBar to identify when is open and/or filled](https://github.com/vtex-apps/store-components/pull/792)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fstore-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex-apps%2Fstore-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex-apps%2Fstore-components/lists"}