React SDK latest

# React SDK latest **Package:** `@enadhq/enad-react-sdk` **Docs channel:** latest (`1.6.0`) **Version range:** `>=1.6.0 <1.7.0` **Verified from:** `enad-packages` commit `03034cf1` Use this landing page to choose the right React SDK route before writing code. The latest track currently describes `@enadhq/enad-react-sdk@1.6.0` and focuses on integration flow, component selection, Search runtime boundaries, storefront composition, and theming decisions. > Exact exports, props, hooks, component parts, package versions, and runtime behavior belong to `enad-packages` and generated package artifacts. These docs explain how to use those facts; they are not the source of those facts. ## Start here Use this page as the React SDK route map for setup, guides, components, storefront composition, Search, and theming. ### If you are starting from zero 1. [Set up the React SDK](/react-sdk/latest/setup) — install the package version for this track, import the stylesheet once, add `EnadProvider`, and decide when runtime Search or theme state belongs at the app boundary. 2. [Build the first app shell](/react-sdk/latest/guides/first-app) — create the smallest useful provider/theme shell before choosing a storefront or commerce surface. 3. [Choose an import surface](/react-sdk/latest/guides/import-surfaces) — keep root setup imports, grouped public entry points, and documented exceptions straight before writing component code. 4. [Wire runtime adapters](/react-sdk/latest/guides/runtime-adapters) — decide how app-owned navigation, cookies, locale, and shopper runtime identity cross into the provider boundary. ### If you already know the job to be done - **I need storefront composition or page assembly guidance** → [Storefront page guide](/react-sdk/latest/guides/storefront-page) - **I need product listing or Search UI** → [Product listing and search](/react-sdk/latest/guides/product-listing-search) - **I need PDP or purchase-adjacent UI** → [Product detail page](/react-sdk/latest/guides/product-detail-page) and [Commerce components](/react-sdk/latest/components/commerce) - **I need theme handoff from the playground** → [Theme from playground](/react-sdk/latest/guides/theme-from-playground), [Theming](/react-sdk/latest/theming), and [Playground bridge](/react-sdk/latest/playground) - **I need account, auth, or cart seams** → [Account and auth UI](/react-sdk/latest/guides/account-and-auth-ui) and [Cart adapters](/react-sdk/latest/guides/cart-adapters) - **I need to browse component families first** → [Components overview](/react-sdk/latest/components) ### Before you trust a detail Use docs-v3 to choose the route and understand ownership. Then hand off to the right truth owner for exact implementation facts: - **Exact package exports, prop names, hooks, and runtime behavior** → `enad-packages` and generated package artifacts - **Interactive theme and component behavior** → [live sandbox](https://sdk.enad.io/sandbox) - **Search query shape, generated documents, and response fields** → [Search GraphQL latest](/search/latest) - **This landing page** → route selection, boundary setting, and next-step handoff ## Guide flows | Job | Use this route | What it decides | | --- | --- | --- | | Install and provider setup | [Setup](/react-sdk/latest/setup) | Stylesheet import, `EnadProvider`, optional `EnadThemeProvider`, and Search runtime context placement. | | Choose the right public package entry point | [Import surfaces](/react-sdk/latest/guides/import-surfaces) | Root setup imports, grouped public barrels, and the few documented deep exceptions. | | Framework/runtime boundary wiring | [Runtime adapters](/react-sdk/latest/guides/runtime-adapters) | Navigation, cookie, locale, and shopper runtime-identity seams that stay app-owned. | | Account and auth UI | [Account and auth UI](/react-sdk/latest/guides/account-and-auth-ui) | Public `client/user` surface for login, signup, password recovery, sign-out, and `useUser`, plus the app-owned auth boundary around it. | | Live cart backend selection | [Cart adapters](/react-sdk/latest/guides/cart-adapters) | Shipped Brink and mock adapters plus the custom `CartAdapter` seam. | | First working React app | [First React SDK app](/react-sdk/latest/guides/first-app) | Minimal shell, safe first surface, and what to keep out of handwritten examples. | | Theme/playground handoff | [Theme from playground](/react-sdk/latest/guides/theme-from-playground) and [Theming](/react-sdk/latest/theming) | Theme hashes, component sets, provider nesting, and precedence rules. | | Storyblok-authored storefront content | [Storyblok storefront bridge](/react-sdk/latest/guides/storyblok-storefront) | App/CMS ownership boundaries, the public Storyblok import surface, and where to verify renderer behavior. | | Storefront composition | [Storefront page guide](/react-sdk/latest/guides/storefront-page) | Header/footer chrome, hero/content blocks, galleries, product display, and app-owned routing/data boundaries. | | Search or PLP | [Product listing and search](/react-sdk/latest/guides/product-listing-search) | Search input, filters, listing layout, connected Search components, and provider-backed Search context. | | Curated live examples and runtimes | [React SDK examples](/react-sdk/latest/examples) | Imported Storybook metadata plus sandbox/showcase route pointers without replacing those runtime owners. | | PDP and commerce UI | [Product detail page](/react-sdk/latest/guides/product-detail-page) and [Commerce components](/react-sdk/latest/components/commerce) | PDP hero anatomy, media, price, variant selection, quantity, purchase actions, and checkout-adjacent boundaries. | | Component selection/reference | [React SDK components](/react-sdk/latest/components) | Component families, source-path metadata, playground routes, and guidance pages for Base UI, Layout, Storefront, and Commerce components. | ## Component discovery Use the component docs when you know the UI surface you need but still need to choose the right React SDK component family. - [Components overview](/react-sdk/latest/components) — start with the family chooser and handoff rules before drilling into individual component pages. - [Commerce components](/react-sdk/latest/components/commerce) — shopper decision, product, cart, search, and checkout-adjacent surfaces. - [Storefront page guide](/react-sdk/latest/guides/storefront-page) — layout and storefront section composition. - [Product listing and search](/react-sdk/latest/guides/product-listing-search) — Search UI, filters, listing layout, and provider-backed Search context. - [Product detail page](/react-sdk/latest/guides/product-detail-page) — PDP media, price, variants, quantity, and purchase-adjacent UI. Typical handoff order: 1. Choose the family on [Components overview](/react-sdk/latest/components). 2. Open the relevant family page or guide route for composition context. 3. Verify exact props, hooks, component parts, helper signatures, and runtime behavior in `enad-packages` or generated package artifacts. 4. Use the [live sandbox](https://sdk.enad.io/sandbox) when you need runtime verification instead of prose alone. ## AI route selection for this package When the task is AI-assisted, start with the smallest React SDK AI route that matches the job: - [React SDK AI guide](/ai/react-sdk/latest) for the full package-aware overview - [React SDK AI discovery and imports](/ai/react-sdk/latest/discovery) for component-family and import-surface selection - [React SDK AI theme and icons](/ai/react-sdk/latest/theme-and-icons) for provider nesting, theme hashes, and runtime icon boundaries - [React SDK AI commerce and Search handoff](/ai/react-sdk/latest/commerce-search-handoff) for PLP, Search, pricing, and purchase-adjacent boundaries - [AI artifacts and manifest](/ai/artifacts) when a tool needs `/llms.txt`, `/llms-full.txt`, or `/ai/manifest.json` ## Search runtime facts to preserve React SDK Search guidance must keep shopper context explicit: - provider-backed Search runtime keeps market, store group, and locale together - `graphql.storeGroupSlug` can override `groupId` for Search context - `mapSearchProductToProductCard()` accepts `storeGroupSlug` so mapped product cards can prefer the intended store-group price Use [Product listing and search](/react-sdk/latest/guides/product-listing-search) for React UI composition and [Search GraphQL latest](/search/latest) when query shape, generated documents, fields, filters, facets, or response types are the question. ## Source-of-truth boundary - **Package source truth:** `enad-packages/packages/enad-react-sdk` - **Runtime sandbox and theme playground:** [sdk.enad.io/sandbox](https://sdk.enad.io/sandbox) - **Current SDK docs/playground surface:** [sdk.enad.io](https://sdk.enad.io) - **docs-v3 role:** public route guidance, authored integration guides, source-boundary explanations, AI-readable summaries, and generated reference pages imported from package artifacts Before copying implementation details, check the package artifacts or source for exact public imports, prop names, hook signatures, helper signatures, generated Search documents, and runtime behavior. Use this page and its child guides to decide where a concern belongs, not to invent API shape. ## Public docs routes Use these public entry points when you need a direct link into the React SDK docs: - [React SDK latest](/react-sdk/latest) — landing page, route chooser, and source boundary. - [Setup](/react-sdk/latest/setup) — provider, stylesheet, theme, and Search runtime setup order. - [Import surfaces](/react-sdk/latest/guides/import-surfaces) — grouped public package entry points, documented exceptions, and “do not invent deeper paths” guidance. - [Runtime adapters](/react-sdk/latest/guides/runtime-adapters) — app-owned navigation, cookie, locale, and runtime-identity seams. - [Account and auth UI](/react-sdk/latest/guides/account-and-auth-ui) — public `client/user` routing for login, signup, password recovery, sign-out, and `useUser`. - [Cart adapters](/react-sdk/latest/guides/cart-adapters) — shipped Brink/mock cart paths and the custom adapter boundary. - [First React SDK app](/react-sdk/latest/guides/first-app) — smallest useful app shell and first-page checklist. - [Theming](/react-sdk/latest/theming) — `EnadThemeProvider`, component sets, hash restoration, and theme tooling boundaries. - [Components](/react-sdk/latest/components) — component docs grouped by Base UI, Layout, Storefront, and Commerce. - [React SDK AI guide](/ai/react-sdk/latest) — AI-readable route map and source-boundary guidance. - [Playground bridge](/react-sdk/latest/playground) — when to use docs versus the live sandbox. - [Troubleshooting](/start/troubleshooting) — symptom-based recovery paths for provider, stylesheet, theme, search, API, and AI docs issues. ## What this page will not do This page does not duplicate generated prop tables, Search fragments, hook signatures, component part contracts, or runtime implementation details. If a page needs exact shape, verify against `enad-packages` or generated package artifacts first, then return here for route selection and ownership boundaries.