Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/buy-box.

When to use it

Use BuyBox when the app wants the supported PDP merchandising anatomy, but not the higher-level ProductHeroSection wrapper.

That usually means:

• the storefront wants to own the exact order of the title, price, review, and option regions
• the page still wants a stable path back to the public family instead of rebuilding on raw primitives

Public anatomy

BuyBox is the merchandising root of the PDP family.

Public parts:

• BuyBox.Header
• BuyBox.Badges
• BuyBox.Title
• BuyBox.Subtitle
• BuyBox.Reviews
• BuyBox.ReviewSummary
• BuyBox.Price
• BuyBox.Options

How it differs from ProductHeroSection

• ProductHeroSection = section-first fast path
• BuyBox = family root for lower-level merchandising composition

If the page mostly fits the standard PDP hero shape, start with ProductHeroSection. If the merchandising shell itself is where variation lives, use BuyBox directly.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=BuyBox.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes