To make your custom component available on the sidebar of the Visual Builder, you will need to use the Widget tool provided by the experro-storefront package. This tool facilitates the integration of your component into the Visual Builder’s interface. 
import { Widget } from 'experro-storefront';
A widget has a method called createWidget which is used to make your component available on the sidebar of the Visual Builder.

​
Example of a Widget

Let’s see a basic example to understand it better. 
import { Widget } from 'experro-storefront';
import { CustomComponent } from '../../custom-component';

const CustomComponentWidget = Widget.createWidget({
  component: CustomComponent,
  label:"<div  class='gjs-fonts gjs-f-b1 custom-widget'>Example Component</div>",
  category: 'Basic Components',
  content: '<CustomComponent/>',
  widgetName: 'CustomComponent',
  widgetProperties: {
    defaults: {
      name: 'Example Component',
      attributes: {},
      activeOnRender: true,
    },
  },
});

export default CustomComponentWidget;
The component, content, and widgetName values should match the name of the component which is used to create a widget. Ensure that you pass the component name exactly as shown in the example, specifically in the content field. The label property determines the appearance of the widget in the side panel of the Visual Builder. It consists of three class names, all of which are required for proper display. Once you have completed these steps, you will be able to see your component in the sidebar of the Visual Builder. For detailed instructions on how to make your component interactive and configure options for your component from the sidebar, please refer to the Component With Free Form Support.