Use this guide when a design has been tuned in the live playground and the app needs to restore that runtime theme state.

The playground is the runtime lab. Enad docs explain the handoff. Exact token names, decoded hash shape, provider props, and component-set internals remain owned by SDK package reference.

The provider model

Keep the two providers separate:

• EnadProvider is the root SDK runtime provider.
• EnadThemeProvider wraps the themed subtree.
• EnadThemeProvider does not replace EnadProvider.

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

const themeHash = "paste-playground-theme-hash-here";

export function StorefrontShell({ children }: { children: React.ReactNode }) {
  return (
    <EnadProvider>
      <EnadThemeProvider hash={themeHash}>{children}</EnadThemeProvider>
    </EnadProvider>
  );
}

This snippet is a placement pattern. Use the actual hash exported by the playground for the theme you reviewed.

Precedence rules

When multiple theme inputs are present, the runtime resolves them in this order:

1. explicit EnadThemeProvider props
2. decoded hash values
3. SDK defaults

That means an explicit componentSet prop can intentionally override a component set stored in a playground hash. Explicit token props can also override decoded token values.

Component sets are structural

componentSet is structural, rather than only a color preset. It changes the component family selected by resolver-backed components and component systems. Tokens and generated CSS affect CSS-variable state; component sets affect the UI family shape.

Use a direct component set when that is the only runtime decision. The provider can stay explicit, and the app does not need to carry a playground hash just to choose the structural family.

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

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

Use hash=\{themeHash\} instead when the playground export carries richer state than a single structural component-set choice.

Where the CLI fits

The enad-theme CLI generates CSS. It does not replace EnadThemeProvider when the app needs runtime hash restoration, scoped token overrides, or component-set state.

A safe mental model:

• CLI output: CSS assets and token output
• EnadThemeProvider: runtime restoration and scoped theme state
• EnadProvider: root SDK runtime

Verification path

After adding the theme:

1. Confirm the SDK stylesheet is imported once.
2. Confirm EnadProvider is outside EnadThemeProvider.
3. Confirm the same playground hash is passed to EnadThemeProvider.
4. Remove explicit componentSet or token props if they should not override the hash.
5. Compare against the live playground using the same component and theme state.

Related docs

• React SDK theming
• EnadThemeProvider component page
• React SDK playground bridge
• Troubleshooting