DocsDocsSDKs

ProductTabs

React SDK guidance for ProductTabs.

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 ProductTabs when a product detail page only needs a compact tab strip for a few parallel sections such as description, specifications, and reviews.

If the PDP body itself needs a richer long-form rhythm with downloads, shipping notes, care sections, or a clearer post-hero structure, start with ProductDetails instead.

If you need generic tabs outside a product context (account settings, category content), use the base Tabs primitive instead. ProductTabs is specifically styled and structured for PDP use.

Composition notes

ProductTabs is prop-driven, not a compound composition:

  • tabs is an array of tab objects, each with an id (unique string), label (visible tab text), and content (ReactNode panel body).
  • defaultTab sets which tab is active initially. If omitted, the first tab opens.
  • The component renders the tab triggers and panels internally.

Tab labels can include counts

Use dynamic labels like "Reviews (24)" to surface content volume without requiring visitors to click through each tab. This is a common pattern for PDP review counts.

Behavior and theming guidance

Tab divider color responds to --enad-border-color and the active tab accent responds to --enad-button-bg, so the tabs integrate with the active theme automatically.

The tab row is horizontally scrollable on narrow screens. Keep the number of tabs between 2 and 5 for scanability. If the page starts needing more sections or mixed section types, move up to ProductDetails instead of stretching the tab pattern too far.

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

Implementation notes

ProductTabs

# ProductTabs > 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-tabs](https://sdk.enad.io/components/commerce/product-tabs). ## When to use it Use `ProductTabs` when a product detail page only needs a compact tab strip for a few parallel sections such as description, specifications, and reviews. If the PDP body itself needs a richer long-form rhythm with downloads, shipping notes, care sections, or a clearer post-hero structure, start with `ProductDetails` instead. If you need generic tabs outside a product context (account settings, category content), use the base `Tabs` primitive instead. `ProductTabs` is specifically styled and structured for PDP use. ## Composition notes ProductTabs is prop-driven, not a compound composition: - **`tabs`** is an array of tab objects, each with an `id` (unique string), `label` (visible tab text), and `content` (ReactNode panel body). - **`defaultTab`** sets which tab is active initially. If omitted, the first tab opens. - The component renders the tab triggers and panels internally. > **Tab labels can include counts** > > Use dynamic labels like `"Reviews (24)"` to surface content volume without requiring visitors to > click through each tab. This is a common pattern for PDP review counts. ## Behavior and theming guidance Tab divider color responds to `--enad-border-color` and the active tab accent responds to `--enad-button-bg`, so the tabs integrate with the active theme automatically. The tab row is horizontally scrollable on narrow screens. Keep the number of tabs between 2 and 5 for scanability. If the page starts needing more sections or mixed section types, move up to `ProductDetails` instead of stretching the tab pattern too far. ## 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=ProductTabs. - Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference. ### Implementation notes