Skip to content
Adobe Commerce Storefront Logo Adobe Commerce Storefront

SDK components

The SDK provides a flexible set of components for actions, containers, navigation, and text that you can combine and customize to build your storefront interface.

Rendering a component

Section titled “Rendering a component”

Storefront blocks are plain JavaScript to which you add an SDK component by calling provider.render with the component and its props, then the target element. It returns an instance you keep to update or remove the component later:

import { Button, provider } from '/@dropins/tools/components.js';


// provider.render(Component, props) returns a function;
// calling that function with a target element mounts the component into it.
const instance = await provider.render(Button, {
  children: 'Add to cart',
  onClick: yourAddToCart,
})(document.querySelector('.add-to-cart'));


// Update props after render:
instance.setProps((prev) => ({ ...prev, disabled: true }));


// Remove the component:
instance.remove();

Components

Section titled “Components”

The SDK provides the following collection of reusable UI components: