Commerce
Product-specific components for pricing, selection, ratings, and cart experiences
54 components
AddressFieldGroup
Structured address form layout with street, postal code, city, and country fields. Integrates with react-hook-form for validation and error display.
AddressForm
Structured checkout form for collecting shipping or billing address details with optional company, phone, and email fields.
Badge
Compact status badge for product cards, listings, and detail pages. Use it for labels like New, Sale, Featured, and stock state.
BuyBox
Public family root for the main merchandising and option-selection zone on a PDP. Use it when the app needs lower-level control than ProductHeroSection while still staying inside the supported product-detail family.
CartDrawer
Slide-over mini-cart surface for reviewing items, adjusting quantity, and reaching checkout quickly.
CartSummary
Cart line-item summary with totals, promo handling, and optional quantity editing.
CartTrigger
Cart button for headers and utility bars with count state and open-close wiring.
CheckoutStepper
Compact progress indicator for checkout stages with completed, active, and upcoming step states.
ColorSwatch
Visual swatch button for selecting color and finish options on product detail surfaces.
CountryRedirect
Dismissible banner suggesting a redirect to the visitor's detected country store. Persists dismissal in localStorage.
EmptyState
Centered fallback state for empty results, empty carts, empty wishlists, and similar zero-data moments. Supports presets or fully custom copy with optional CTA.
FilterChip
Toggle-style chip for selectable and removable active filters.
FilterGroup
Collapsible facet group that renders checkbox, color, or price filtering controls.
FilterPanel
Controlled faceted filter surface for collection and search result pages, now with a slot-first anatomy for custom header, body, summary, and footer layouts.
ImageLightbox
Controlled fullscreen image viewer with keyboard navigation plus zoom, pan, and pinch support for product and editorial galleries.
InfiniteScroll
Viewport-triggered pagination wrapper with loading and end-of-list states. Supports automatic sentinel loading or an accessible manual load-more button fallback.
LanguageSelector
Dropdown selector for switching between store languages. Supports full name, code-only, and icon display modes.
ListingToolbar
Browse-control toolbar for listing and collection pages with slot-first composition and a convenience path for common title, result, sort, filter, and chip patterns.
MaterialSelector
Option picker for finishes and materials with swatch and tile presentations.
NewsletterSignup
Email capture form with loading, success, and error states. Use it for footer signups, embedded editorial CTAs, and campaign landing pages.
OrderConfirmation
Clear post-purchase confirmation block for successful orders.
OrderSummary
Read-only order recap with items, totals, fulfillment details, and addresses.
PaymentMethodSelector
Radio-style selector for choosing one checkout payment method from a structured list.
Price
Localized money display for regular and discounted pricing. Handles strike-through originals, sale highlighting, and optional discount badges without repeating formatting logic throughout the storefront.
ProductCardSkeleton
Loading placeholder shaped like the storefront product card.
ProductDetails
Post-hero PDP details family for long-form product copy, specifications, care guidance, shipping notes, and downloads.
ProductHeroSection
Section-first PDP hero that gives teams a fast product-detail entry while still mapping cleanly to the public ProductMedia, BuyBox, PurchaseActions, and ProductTrust family surfaces.
ProductMedia
Lower-level PDP media family for supported shells around the standard product gallery.
ProductRecommendations
Recommendation-section family for related items, complete-the-look modules, and richer cross-sell moments with optional supporting copy, CTAs, and aside content.
ProductTabs
Compact tabbed content container for PDPs when the body only needs a small set of parallel sections such as description, specifications, or reviews.
ProductTrust
Lower-level PDP reassurance family for short-form delivery, returns, warranty, and service cues near the buy box.
ProductUSP
Single-line reassurance or benefit row for product detail and campaign surfaces.
PromoCodeInput
Discount-code control for applying, showing, and removing promo codes in cart and checkout flows.
PurchaseActions
Public family root for quantity, primary CTA, stock messaging, and purchase-adjacent extensions on a PDP.
QuantityPicker
Compact increment and decrement control for cart and product quantity selection.
QuickView
Fast product preview for listing pages with imagery, pricing, and action slots. Opens as a sheet or modal without navigating away from the grid.
ReviewSummary
Rating overview with average score and distribution bars for product reviews.
SearchAutocomplete
Search field with debounced suggestions, keyboard-friendly selection, and optional search submission.
SearchBar
Simple search form with an input and submit action for direct query-driven browsing.
SearchPanel
Provider-agnostic search panel shell with a controlled query field, normalized result sections, and slot-first anatomy.
SearchProductCard
Connected search-backed product card that resolves a search product and feeds it into the standard ProductCard presentation.
SearchProductRecommendations
Connected recommendation section that resolves search-backed products and feeds them into the standard ProductRecommendations plus ProductCard family.
SearchProductVariantSelector
Connected search-backed variant selector that resolves a search product and drives the existing VariantSelector presentation.
ShareButton
Share action that prefers native device sharing and falls back to clipboard copy.
ShippingMethodSelector
Radio-style selector for choosing between delivery methods with price and timing context.
Skeleton
Low-level loading placeholder for building custom content and media shells.
SortSelect
Sort-order dropdown for collections and search results built around a simple options contract.
StarRating
Star-based rating display and input with optional counts, values, and interactive selection.
Testimonial
Customer quote card with optional attribution, rating, and grid layout support.
ToggleListView
Two-state control for switching product listings between grid and list layouts.
TrustBadges
Short reassurance badges for shipping, warranty, sustainability, and other trust cues.
VariantSelector
Multi-axis product option picker for size, color, material, and other variant dimensions.
WishlistDrawer
Slide-over wishlist surface for saved items and optional move-to-cart actions.
WishlistToggle
Save toggle for product cards and detail pages with active, loading, and size states.