DocsDocsAgents

React SDK agent theme and icons

Guide agents through provider nesting, theme hashes, component sets, and icon/runtime boundaries.

Start here when an agent needs to restore a playground theme, choose a component set, talk about icon behavior, or explain which runtime boundary owns theme state.

Provider and runtime boundary

Keep these roles separate:

  • EnadProvider is the root SDK runtime provider.
  • EnadProvider componentSet=\{...\} owns app-wide structural set selection.
  • EnadThemeProvider belongs inside EnadProvider when a subtree needs scoped theme state.
  • The root provider owns SDK-wide runtime setup such as icon registration and shared client/runtime wiring.
  • The theme provider owns scoped token overrides and restored theme hashes.

Use the confirmed public imports only:

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

When exact icon APIs, icon names, provider options, or theme prop names matter, inspect package reference before writing code.

Theme restoration rules

  • Correct nesting is EnadProvider outside and EnadThemeProvider around any scoped themed subtree.
  • Runtime precedence is explicit EnadThemeProvider props, then decoded hash values, then SDK defaults.
  • componentSet is structural. It changes the resolver-backed UI family, not only colors.
  • Token overrides change CSS-variable state and should stay conceptually separate from componentSet decisions.
  • Use hash=\{themeHash\} when restoring richer playground state.
  • Use EnadProvider componentSet="..." when the app only needs the structural family.

Playground boundary

Use the React SDK guides to choose provider boundaries. Use the playground to validate the live result.

  • The playground owns runtime editing, share URLs, and export flows.
  • React SDK guides cover route selection, provider guidance, and package-aware wording.
  • enad-theme CSS output or exported snippets do not replace EnadThemeProvider for runtime restoration.
  • Do not copy sandbox-only helpers or route code into a consumer app.

Icon guidance for agents

Keep icon wiring at the SDK runtime boundary. Use package reference for exact icon registry APIs.

Use this rule:

  1. Keep icon setup discussion at the EnadProvider boundary.
  2. Verify exact icon helpers, option names, or override APIs in package reference.
  3. Keep theme state concerns in EnadThemeProvider rather than mixing them into icon guesses.

Troubleshooting order

If a restored app does not match the playground or icon behavior looks wrong, check in this order:

  1. @enadhq/enad-react-sdk/styles.css is imported once.
  2. EnadThemeProvider, when used, is nested inside EnadProvider.
  3. The same hash or app-wide componentSet used in the playground is being restored.
  4. Explicit props are not overriding the intended hash values.
  5. Exact icon/runtime APIs were taken from package reference instead of prose memory.

React SDK agent theme and icons

# React SDK agent theme and icons Start here when an agent needs to restore a playground theme, choose a component set, talk about icon behavior, or explain which runtime boundary owns theme state. ## Provider and runtime boundary Keep these roles separate: - `EnadProvider` is the root SDK runtime provider. - `EnadProvider componentSet={...}` owns app-wide structural set selection. - `EnadThemeProvider` belongs inside `EnadProvider` when a subtree needs scoped theme state. - The root provider owns SDK-wide runtime setup such as icon registration and shared client/runtime wiring. - The theme provider owns scoped token overrides and restored theme hashes. Use the confirmed public imports only: ```tsx import "@enadhq/enad-react-sdk/styles.css"; import { EnadProvider } from "@enadhq/enad-react-sdk"; import { EnadThemeProvider } from "@enadhq/enad-react-sdk/client/theme"; ``` When exact icon APIs, icon names, provider options, or theme prop names matter, inspect package reference before writing code. ## Theme restoration rules - Correct nesting is `EnadProvider` outside and `EnadThemeProvider` around any scoped themed subtree. - Runtime precedence is explicit `EnadThemeProvider` props, then decoded hash values, then SDK defaults. - `componentSet` is structural. It changes the resolver-backed UI family, not only colors. - Token overrides change CSS-variable state and should stay conceptually separate from `componentSet` decisions. - Use `hash={themeHash}` when restoring richer playground state. - Use `EnadProvider componentSet="..."` when the app only needs the structural family. ## Playground boundary Use the React SDK guides to choose provider boundaries. Use the playground to validate the live result. - The playground owns runtime editing, share URLs, and export flows. - React SDK guides cover route selection, provider guidance, and package-aware wording. - `enad-theme` CSS output or exported snippets do not replace `EnadThemeProvider` for runtime restoration. - Do not copy sandbox-only helpers or route code into a consumer app. ## Icon guidance for agents Keep icon wiring at the SDK runtime boundary. Use package reference for exact icon registry APIs. Use this rule: 1. Keep icon setup discussion at the `EnadProvider` boundary. 2. Verify exact icon helpers, option names, or override APIs in package reference. 3. Keep theme state concerns in `EnadThemeProvider` rather than mixing them into icon guesses. ## Troubleshooting order If a restored app does not match the playground or icon behavior looks wrong, check in this order: 1. `@enadhq/enad-react-sdk/styles.css` is imported once. 2. `EnadThemeProvider`, when used, is nested inside `EnadProvider`. 3. The same `hash` or app-wide `componentSet` used in the playground is being restored. 4. Explicit props are not overriding the intended hash values. 5. Exact icon/runtime APIs were taken from package reference instead of prose memory. ## Related routes - [React SDK theming](/react-sdk/latest/theming) - [Theme from playground](/react-sdk/latest/guides/theme-from-playground) - [Playground](/playground) - [React SDK agent discovery and imports](/ai/react-sdk/latest/discovery) - [Agent files](/ai/artifacts)