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/product-details.

When to use it

Use ProductDetails for the body of the PDP after the hero.

It is the right family when the page needs:

• editorial product story or supporting copy
• specifications, sizing, care, or shipping sections
• grouped downloads or technical attachments
• a stable post-hero rhythm that can stay simple or open up into full composition

If the page only needs a small, compact tab strip, ProductTabs can still be the lighter tool. But when the PDP body itself needs a first-class structure, start with ProductDetails.

Family boundary

ProductDetails complements ProductHeroSection.

• ProductHeroSection owns the top-of-page hero entry: media, buy box, actions, and trust opening.
• ProductDetails owns the body that follows: copy, specs, care, shipping, downloads, and supporting notes.
• ProductRecommendations should stay outside this family so merchandising does not blur into product information.

Do not overload the hero with long-form detail content

If the page needs several post-hero sections, keep the hero focused and hand the body to ProductDetails instead of stretching ProductHeroSection beyond its natural boundary.

Composition notes

Lead with the compound path when the page needs explicit control over section ordering or custom markup.

Use the structured path when the body follows a familiar rhythm:

• sections for named PDP sections
• variant="specs" with specs items for definition-list style technical data
• variant="downloads" with downloads items for grouped file rows
• variant="sizing", variant="care", or variant="shipping" when the content should stay semantically explicit even if the markup is still rich text
• footer for supporting notes, project-sales prompts, or service guidance after the main detail sections

Behavior and theming guidance

ProductDetails should feel calm and scannable. Keep the left-side headings short and make the right-side content do the heavier explanatory work.

If the page grows long enough to need sticky in-page navigation, pair ProductDetails with SectionNav. Keep recommendation rails and editorial merchandising blocks outside the family so the main information rhythm stays clear.

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=ProductDetails.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes