Skip to main content

Storefront SDK components and hooks

This is the inventory of the React and Vue UI libraries: their commerce components, headless hooks and helpers, grouped by domain. The providers that set them up are on UI components. For how the libraries fit together and how to wire them up, see the Storefront SDK guides. Every React component below links to its props, and every hook links to its options and return type, on the package documentation sites.

The React and Vue libraries expose the same components and the same hooks (composables in Vue), so the inventory below applies to both unless noted.

Checked against react-ui 0.32.0 and vue-ui 0.31.1 on 28 October 2026. The TypeScript types in your editor always match the version you installed. For what changed in later versions, see the react-ui changelog and the vue-ui changelog.

Packages​

LibraryPackage
React@propeller-commerce/propeller-v2-react-ui
Vue@propeller-commerce/propeller-v2-vue-ui

Both build on @propeller-commerce/propeller-v2-core-ui and @propeller-commerce/propeller-sdk-v2. See Understanding the Storefront SDK for the full package set.

How to use them​

Install the library and the SDK, mount the providers once at your app root, then render any component or call any hook inside them. Components read the SDK services and the session from context. See UI components for the provider setup and entry points, and SDK services for the data layer.

Components​

Catalog and product​

Clusters​

Machines and spare parts​

  • MachineCard: card for a machine, a product that has orderable spare parts
  • MachineGrid: paginated grid of machines, the machine equivalent of ProductGrid

Grid and navigation​

Cart and checkout​

Price on request​

  • RequestPriceButton: "Request a price" button, shown instead of add-to-cart when a product's price is on request. ProductInfo renders it for such products. For visitors who are not signed in, it leads to sign-in
  • PriceRequestList: the price request list as an editable table of products and quantities with one comment field, sent as one request. Pass it the items from usePriceRequest

Orders and quotes​

Account, authentication and B2B​

Images​

  • PropellerImg: renders an image the way the library components do. It uses the image component you set as imgComponent on PropellerDepsProvider (React) or the propellerVue plugin (Vue) and falls back to a plain <img> when none is set. In React, pass that component in the as prop, for example from useImgComponent()

Structured data​

  • ProductJsonLd, ClusterJsonLd, ItemListJsonLd: schema.org JSON-LD output for SEO. In React import them from @propeller-commerce/propeller-v2-react-ui/pure, in Vue from the package root

Hooks and composables​

Headless: they hold state and call the API but render nothing. Use them to build your own UI or to drive the components above. Hooks in React, composables in Vue, with the same names.

HookPurposeOptions and return type
useAuthLogin, registration and forgot-password flowsReact · Vue
useCartCart resolution, line items and action codesReact · Vue
useCheckoutCarriers, payment methods and placing an orderReact · Vue
useCompanyCompany switching and company data (B2B)React · Vue
useAddressAddress create, read, update and deleteReact · Vue
useOrdersOrder history search and detailReact · Vue
useFavoritesFavorite lists and list itemsReact · Vue
useMenuCategory navigation treeReact · Vue
useProductInfoSingle-product detail dataReact · Vue
useProductSearchCatalog search and filteringReact · Vue
useProductSliderCross-sell and up-sell slidersReact · Vue
useProductSpecsProduct attribute groups for spec tablesReact · Vue
useProductBundlesProduct bundle compositionReact · Vue
useMachinesMachines listing (a machine is a product with orderable spare parts)React · Vue
useSparePartsA machine's spare parts and child machinesReact · Vue
useClusterConfiguratorCluster selection stateReact · Vue
usePurchaseAuthorizationConfiguratorConfigure purchase authorization rules (B2B)React · Vue
usePurchaseAuthorizationRequestsReview and act on purchase authorization requests (B2B)React · Vue
useQuickOrderQuick order rows, product typeahead and bulk add to cartReact · Vue
usePriceRequestPrice request list, separate from the cart and kept in local storage. Your onSubmit function sends itReact · Vue
useServicesRead the SDK services bundle from the providerReact · Vue
useImgComponentRead the image component set as imgComponent on the provider or pluginReact

Helpers​

Plain functions for your own UI. Both libraries export them.

  • isPriceOnRequest: true when a product's price is on request (priceData.display is ON_REQUEST). For a cluster, its default product decides. Use it to show RequestPriceButton instead of AddToCart
  • isCheckoutAllowed: true unless the signed-in Contact has a purchase authorization limit for the active Company and the cart total excluding tax is above it. Pass the user, companyId and cart. Customers are never limited
  • isOverAuthorizationLimit: the opposite of isCheckoutAllowed, true when the cart needs a purchase authorization request before it can be ordered

Finding props and options​

  • React components. Each name above links to its *Props type on the React documentation site.
  • Hooks and composables. The table above links each one to its Use*Options and Use*Return types, for React and for Vue.
  • Vue components. The Vue documentation site covers the composables but not the component props. For those, read the types that ship with the package: your editor shows them inline.

Whatever you read online, the types that ship with the package are the ones that match the version you installed.

Last updated on