First React SDK app

Build the smallest useful React SDK shell with provider, stylesheet, theming, and runtime boundaries.

Use this guide when you want the smallest reliable path from an empty React app to a page that can host Enad storefront components.

Exact package versions, exports, provider options, component props, hooks, and runtime behavior belong to SDK package reference. This guide covers setup order and ownership boundaries.

What you are building

A first app needs four decisions:

import the SDK stylesheet once
place EnadProvider at the app runtime boundary
pass componentSet to EnadProvider only when the whole app needs that structural set
add EnadThemeProvider only when a subtree needs scoped runtime theme state
choose a first page surface without pretending the guide owns component prop truth

1. Import the stylesheet once

Add the SDK stylesheet in the same place your app imports global CSS.

import "@enadhq/enad-react-sdk/styles.css";

If components render without the expected spacing, component-set styling, or token output, confirm this import is present before changing component code.

2. Add the root SDK provider

EnadProvider is the root SDK runtime provider. Put it at the app boundary that owns SDK-wide runtime setup.

import { EnadProvider } from "@enadhq/enad-react-sdk";

export function AppShell({ children }: { children: React.ReactNode }) {
  return <EnadProvider>{children}</EnadProvider>;
}

Keep provider options out of the first pass unless the app already owns the matching integration. For example, do not add search/client configuration until the page actually resolves live Search GraphQL data.

3. Add runtime theme state only when needed

Use EnadProvider componentSet="..." when the whole app should use a structural set. Reach for a nested EnadThemeProvider only when the page needs scoped token overrides or playground hash restoration.

import { EnadProvider } from "@enadhq/enad-react-sdk";

export function StorefrontShell({ children }: { children: React.ReactNode }) {
  return <EnadProvider componentSet="editorial">{children}</EnadProvider>;
}

Runtime theme precedence is always:

explicit EnadThemeProvider props
decoded hash values
SDK defaults

componentSet is structural. It changes the component family language; it is not only a color-token preset.

4. Pick the first surface

For a first app, start with one route and one component family.

App chrome usually starts with Header and Footer. Marketing pages usually start with Hero or storefront content blocks.

ProductCard fits after the page already owns normalized product data. Choose ProductHeroSection when the app needs a product-detail hero, not a full checkout flow.

Treat component pages as selection and composition guidance. When exact props matter, check package reference.

First-app checklist

The SDK stylesheet is imported once.
EnadProvider wraps the app runtime boundary.
App-wide component-set selection stays on EnadProvider.
EnadThemeProvider wraps only the subtree that needs scoped runtime theme state.
The first page has app-owned routing, data loading, and side effects.
Component docs are used for intent and composition, not as handwritten prop tables.
The live playground is used for visual validation after the app shell works.