Storefront SDK components and hooks

This is the inventory of the React and Vue UI libraries: every component and headless hook they export, grouped by domain. For how the libraries fit together and how to wire them up, see the Storefront SDK guides. For the exact props and options of any item, read its TypeScript types in your editor or the package README on npm: those ship with the version you installed and are always current.

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.

Packages

Library	Package	Version
React	@propeller-commerce/propeller-v2-react-ui	0.4
Vue	@propeller-commerce/propeller-v2-vue-ui	0.3

Both build on propeller-v2-core-ui and 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 PropellerProvider once at your app root, then render any component or call any hook inside it. Components read the SDK services from context. See UI components for the provider setup and entry points, and SDK services for the data layer.

Components

Catalog and product

• ProductGrid: paginated product grid for a category or search result
• ProductCard: single product card with image, price and add-to-cart; supports a compound API
• ClusterCard: card for a configurable product (cluster)
• ProductInfo: product detail block (name, SKU, price, actions)
• ProductPrice: formatted, tax-aware price
• ProductBulkPrices: quantity-break price table
• ProductGallery: product image gallery
• ProductVideos: embedded product videos
• ProductDownloads: downloadable product documents
• ProductSpecifications: attribute and specification table
• ProductDescription: long product description
• ProductShortDescription: short product description
• ProductTabs: tabbed description, specifications and downloads
• ProductSlider: cross-sell and up-sell slider
• ProductBundles: product bundle composition
• ItemStock: stock and availability indicator
• PriceToggle: tax-inclusive or tax-exclusive price toggle
• DeliveryDate: delivery date selection

Clusters

• ClusterConfigurator: variant and option selection for a cluster
• ClusterInfo: cluster detail block
• ClusterOptions: add-on option groups

Grid and navigation

• GridToolbar: sort and layout controls for a grid
• GridFilters: faceted product filters
• GridPagination: pagination control
• GridTitle: grid heading with result count
• Breadcrumbs: category breadcrumb trail
• Menu: category navigation menu
• SearchBar: product search input
• CategoryDescription: category long description
• CategoryShortDescription: category short description

Cart and checkout

• AddToCart: add-to-cart control with quantity
• CartIconAndSidebar: cart icon and slide-in sidebar
• CartItem: single cart line item
• CartOverview: full cart contents
• CartSummary: totals summary
• CartCarriers: shipping method selection
• CartPaymethods: payment method selection
• ActionCode: promotion or action code input
• ItemsOverview: line-item list for a cart or order
• CartBonusItems: promotional bonus items in the cart

Orders and quotes

• OrderList: order history list with filters
• OrderActions: actions on an order, such as reorder
• OrderItemCard: single order line
• OrderSummary: order summary
• OrderTotals: order totals
• OrderShipments: shipment and tracking information
• OrderBonusItems: bonus items on an order
• QuoteActions: actions on a quote (B2B)

Account, authentication and B2B

• LoginForm: sign-in form
• RegisterForm: registration form (Contact, Customer or both, by shop mode)
• ForgotPassword: password recovery
• UserDetails: account profile details
• AccountIconAndMenu: account icon with dropdown menu
• AddressCard: a single address
• AddressSelector: choose a delivery or invoice address
• CompanySwitcher: switch the active Company (B2B)
• AddToFavorite: add a product to a favorite list
• FavoriteLists: favorite lists overview
• FavoriteListItem: a single favorite list entry
• FavoriteListDetails: items in a favorite list
• PurchaseAuthorizationConfigurator: configure purchase-authorization rules (B2B)
• PurchaseAuthorizationRequests: review and act on authorization requests (B2B)

Structured data

• ProductJsonLd, ClusterJsonLd, ItemListJsonLd: schema.org JSON-LD output for SEO

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.

Hook	Purpose
useAuth	Login, registration and forgot-password flows
useCart	Cart resolution, line items and action codes
useCheckout	Carriers, payment methods and placing an order
useCompany	Company switching and company data (B2B)
useAddress	Address create, read, update and delete
useOrders	Order history search and detail
useFavorites	Favorite lists and list items
useMenu	Category navigation tree
useProductInfo	Single-product detail data
useProductSearch	Catalog search and filtering
useProductSlider	Cross-sell and up-sell sliders
useProductSpecs	Product attribute groups for spec tables
useProductBundles	Product bundle composition
useClusterConfigurator	Cluster selection state
usePurchaseAuthorizationConfigurator / usePurchaseAuthorizationRequests	B2B purchase authorization
useServices	Read the SDK services bundle from the provider

Finding props and options

This page lists what exists. For the props of a component or the options of a hook, use the TypeScript types that ship with the package (your editor shows them inline), or the package's documentation site (React, Vue). Each component exports a *Props type and each hook a Use*Options and Use*Return type. Because those travel with the version you installed, they never drift from the code you are running.

This inventory was written against propeller-v2-react-ui 0.4 and propeller-v2-vue-ui 0.3.