Discover how components in VTEX IO Store Framework enable you to build your storefront, from basic elements to advanced customizations.
Components are building blocks used to create storefronts and admin apps. They are built on the VTEX IO development platform using React technology.
These components are modular, reusable pieces of code that encapsulate specific features 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.
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.
In the guides of this section, you will explore how to leverage components to create customizable storefronts.
Before you begin
Develop your Store Theme
Make sure your store has a Store Theme developed following the Storefront guide.
Check the builders
Check if the builders are properly installed in your Store Theme. To use builders, your account must have at least version vtex.builder-hub@0.293.4 installed. Also, you need to specify them in the app's manifest.json file. Learn more in Builders.
You must have at least the following builders configured:
- store builder: Enables the development of Store Framework storefronts.
- react builder: Used to develop apps with React when your project requires customized frontend solutions.
Learn about VTEX IO apps
Familiarize yourself with VTEX IO apps and learn how to build custom solutions following the guide Storefront apps.
Essential concepts
A deep understanding of native and custom components is important for using them more effectively.
Native components
Within the VTEX IO ecosystem, different types of components address 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 creating 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, aiming 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. Some components in this collection offer advanced features, such as product recommendations, search filters, and personalized content delivery.
Custom components
When building a store theme, you can leverage existing VTEX IO apps or create custom apps to add new components and extend the platform features.
See our guide about how to develop an app.