DocsDocsSDKs

ProductTrust

React SDK guidance for ProductTrust.

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

When to use it

Use ProductTrust when the app wants the supported PDP reassurance family, but not the higher-level ProductHeroSection wrapper.

That usually means:

  • the storefront wants to own the exact reassurance layout
  • the trust region needs a little more structure than a plain USP list
  • the page still wants a stable path back to the public PDP family instead of rebuilding one-off reassurance blocks

Boundary with ProductDetails

ProductTrust is for short-form confidence signals near the buy box:

  • delivery cues
  • returns and warranty highlights
  • short service notes
  • compact reassurance footers or links

ProductDetails is for the long-form PDP body after the hero:

  • specifications
  • care instructions
  • shipping details
  • downloads
  • richer editorial explanation

If the content starts feeling like a section of body copy or operational detail, it belongs in ProductDetails, not ProductTrust.

Public anatomy

ProductTrust is the reassurance root of the PDP family.

Public parts:

  • ProductTrust.Header
  • ProductTrust.Heading
  • ProductTrust.Note
  • ProductTrust.Items
  • ProductTrust.Footer
  • ProductTrust.Item
  • ProductTrust.USPList (compatibility alias for the old list path)

Fast path and open path

The fast path is the structured prop API:

  • heading
  • note
  • items
  • itemsVariant
  • footer

The open path is the compound family surface.

Start with the prop path when the default reassurance structure already fits. Drop to the compounds when the page needs more control over how the trust header, items, or footer are arranged.

How it differs from ProductHeroSection

  • ProductHeroSection = section-first fast path for the whole PDP hero
  • ProductTrust = lower-level reassurance family inside that hero rhythm
  • ProductDetails = long-form body after the hero

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

Implementation notes

ProductTrust

# ProductTrust > 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-trust](https://sdk.enad.io/components/commerce/product-trust). ## When to use it Use `ProductTrust` when the app wants the supported PDP reassurance family, but not the higher-level `ProductHeroSection` wrapper. That usually means: - the storefront wants to own the exact reassurance layout - the trust region needs a little more structure than a plain USP list - the page still wants a stable path back to the public PDP family instead of rebuilding one-off reassurance blocks ## Boundary with ProductDetails `ProductTrust` is for **short-form confidence signals near the buy box**: - delivery cues - returns and warranty highlights - short service notes - compact reassurance footers or links `ProductDetails` is for the **long-form PDP body after the hero**: - specifications - care instructions - shipping details - downloads - richer editorial explanation If the content starts feeling like a section of body copy or operational detail, it belongs in `ProductDetails`, not `ProductTrust`. ## Public anatomy `ProductTrust` is the reassurance root of the PDP family. Public parts: - `ProductTrust.Header` - `ProductTrust.Heading` - `ProductTrust.Note` - `ProductTrust.Items` - `ProductTrust.Footer` - `ProductTrust.Item` - `ProductTrust.USPList` *(compatibility alias for the old list path)* ## Fast path and open path The fast path is the structured prop API: - `heading` - `note` - `items` - `itemsVariant` - `footer` The open path is the compound family surface. Start with the prop path when the default reassurance structure already fits. Drop to the compounds when the page needs more control over how the trust header, items, or footer are arranged. ## How it differs from ProductHeroSection - `ProductHeroSection` = section-first fast path for the whole PDP hero - `ProductTrust` = lower-level reassurance family inside that hero rhythm - `ProductDetails` = long-form body after the hero ## 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=ProductTrust. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes