Exact theme provider props, token names, and component-set internals belong to SDK package reference. This page preserves the runtime model taught by the live playground.

Provider boundary

EnadProvider and EnadThemeProvider do different jobs:

• EnadProvider is the root SDK runtime provider and can select the app-wide componentSet.
• EnadThemeProvider wraps a scoped themed subtree when the app needs hash restoration or token overrides.
• EnadThemeProvider does not replace EnadProvider.

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

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

Runtime precedence

When restoring or overriding theme state, use this precedence model:

1. Explicit EnadThemeProvider props.
2. Decoded hash values from a playground/theme URL.
3. SDK defaults.

That means an explicit componentSet or token override can intentionally win over restored hash state.

Component sets are structural

componentSet is not only a color preset. It changes the structural UI language for resolver-backed components and component families. Tokens and theme hashes adjust CSS-variable state; component sets select the family shape.

Use a direct component set on EnadProvider when the app only needs a structural family. This keeps the runtime choice readable in application code.

<EnadProvider componentSet="editorial">{children}</EnadProvider>

Use EnadThemeProvider when restoring richer playground state. The hash carries the exported theme state instead of only the family name.

<EnadThemeProvider hash={themeHash}>{children}</EnadThemeProvider>

Theme tooling

The enad-theme CLI and generateThemeCSS() style tooling generate CSS output. They do not replace EnadThemeProvider for runtime restoration, subtree scoping, or component-set state.

Troubleshooting restored themes

If a restored app does not match the playground:

1. Confirm the same hash is passed to EnadThemeProvider.
2. Check whether explicit componentSet overrides the hash value.
3. Check whether explicit token props override decoded token values.
4. Confirm @enadhq/enad-react-sdk/styles.css is imported.
5. Test the same state in the live sandbox.

Related docs

• React SDK setup
• Component resolver
• EnadThemeProvider component page