Components are building blocks used to create storefronts and admin apps, as they are built on the VTEX IO development platform and React technology.

These components are modular, reusable pieces of code that encapsulate specific functionality and can be combined to create complex user interfaces. They range from basic elements, such as buttons and forms, to more complex ones, such as product carousels and navigation bars. Conceptually, components resemble JavaScript functions. They take arbitrary inputs, referred to as props, and return React elements that articulate what should be displayed on the screen.

These React components are encapsulated and delivered as VTEX IO apps through the react builder. They are also mapped to corresponding interfaces via the store builder. This architecture defines how the component should behave and interact within the broader Store Framework environment.

You can use our native components, customize them as needed, or even create your own components to meet the specific needs of your projects on the VTEX IO platform.

Within the VTEX IO ecosystem, different types of components cater to different aspects of store development. Below are the main types of components:

• Basic components: Reusable UI elements such as buttons, forms, input fields, and other fundamental interface elements. These components provide the building blocks for constructing more complex UI elements and features.

The Product Summary exemplifies a basic storefront component, summarizing essential product information like name, price, and image, which can be seamlessly integrated into other store blocks, such as the Shelf.

• Store Components: Collection of components that can be used to create or extend other VTEX apps to improve the functionality and appearance of the storefront. They cover a range of elements, including product displays, navigation bars, checkout processes, and category pages. In this collection, some components offer advanced features, such as product recommendations, search filters, and personalized content delivery.

Learn more about each component of this collection in the VTEX Store Components guide.

When building a store theme, you can leverage existing VTEX IO apps or create custom apps to add new components and extend the platform’s features.

See our guide about how to develop an app or our Learning Certer to learn more about this process.