Shopper-facing decision, cart, discovery, product, and checkout-adjacent components.

Choose the right commerce surface, then move to the guide or component family that matches the job. Exact props and child-part contracts stay in SDK package reference.

When to use this family

Start here when the shopper task is product discovery, PDP composition, cart interaction, or purchase-adjacent UI and you need to choose the right component route.

Common jobs:

• product cards, product media, variants, price, quantity, and buy-box decisions
• cart drawers, cart summaries, promo codes, order summaries, and checkout-adjacent flows
• Search inputs, autocomplete, filter panels, sort controls, listing toolbars, and discovery helpers
• product recommendations, trust, reviews, and shopper decision support around a purchase flow

When to switch routes

Switch routes when the question becomes page-level composition or another family entirely:

• I need PLP or Search page assembly guidance -> Product listing and search
• I need PDP composition guidance -> Product detail page
• I need editorial landing-page sections or merchandising blocks -> Storefront components and Storefront page guide
• I need low-level primitives like dialogs, inputs, tabs, or sheets -> Base UI components
• I need exact props, helper signatures, or runtime behavior -> SDK package reference and Search GraphQL latest when the question is query or response shape

Public import path

Import components from @enadhq/enad-react-sdk/client/storefront.

Common starting points in this family

Use these as common starting points when you already know the shopper flow you are building. The full component list below remains the canonical route inventory for this family:

• Search and listing discovery -> SearchBar, SearchPanel, SearchAutocomplete, FilterGroup, FilterPanel, ListingToolbar, SortSelect, ToggleListView, InfiniteScroll
• Product cards and recommendation surfaces -> SearchProductCard, ProductCardSkeleton, ProductRecommendations, SearchProductRecommendations, QuickView
• PDP and purchase decision UI -> BuyBox, ProductDetails, ProductHeroSection, ProductMedia, ProductTabs, VariantSelector, QuantityPicker, PurchaseActions, Price
• Cart and checkout-adjacent flows -> CartDrawer, CartSummary, CartTrigger, PromoCodeInput, OrderSummary, CheckoutStepper, AddressForm, ShippingMethodSelector, PaymentMethodSelector

Component docs

• AddressFieldGroup - AddressFieldGroup
• AddressForm - AddressForm
• Badge - Badge
• BuyBox - BuyBox
• CartDrawer - CartDrawer
• CartSummary - CartSummary
• CartTrigger - CartTrigger
• CheckoutStepper - CheckoutStepper
• ColorSwatch - ColorSwatch
• CountryRedirect - CountryRedirect
• EmptyState - EmptyState
• FilterChip - FilterChip
• FilterGroup - FilterGroup
• FilterPanel - FilterPanel
• ImageLightbox - ImageLightbox
• InfiniteScroll - InfiniteScroll
• LanguageSelector - LanguageSelector
• ListingToolbar - ListingToolbar
• MaterialSelector - MaterialSelector
• NewsletterSignup - NewsletterSignup
• OrderConfirmation - OrderConfirmation
• OrderSummary - OrderSummary
• PaymentMethodSelector - PaymentMethodSelector
• Price - Price
• ProductCardSkeleton - ProductCardSkeleton
• ProductDetails - ProductDetails
• ProductHeroSection - ProductHeroSection
• ProductMedia - ProductMedia
• ProductRecommendations - ProductRecommendations
• ProductTabs - ProductTabs
• ProductTrust - ProductTrust
• ProductUSP - ProductUSP
• PromoCodeInput - PromoCodeInput
• PurchaseActions - PurchaseActions
• QuantityPicker - QuantityPicker
• QuickView - QuickView
• ReviewSummary - ReviewSummary
• SearchAutocomplete - SearchAutocomplete
• SearchBar - SearchBar
• SearchPanel - SearchPanel
• SearchProductCard - SearchProductCard
• SearchProductRecommendations - SearchProductRecommendations
• SearchProductVariantSelector - SearchProductVariantSelector
• ShareButton - ShareButton
• ShippingMethodSelector - ShippingMethodSelector
• Skeleton - Skeleton
• SortSelect - SortSelect
• StarRating - StarRating
• Testimonial - Testimonial
• ToggleListView - ToggleListView
• TrustBadges - TrustBadges
• VariantSelector - VariantSelector
• WishlistDrawer - WishlistDrawer
• WishlistToggle - WishlistToggle

Playground

Open the live playground category at sdk.enad.io/components/commerce when you need runtime experimentation or visual verification after you choose a shopper flow or component route.