Restore a theme from the playground
# Restore a theme from the playground
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. Docs-v3 explains the handoff. Exact token names, decoded hash shape, provider props, and component-set internals remain owned by `enad-packages` and generated package artifacts.
## 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`.
```tsx
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 (
{children}
);
}
```
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, not just 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:
```tsx
import { EnadProvider } from "@enadhq/enad-react-sdk";
import { EnadThemeProvider } from "@enadhq/enad-react-sdk/client/theme";
export function EditorialShell({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Use `hash={themeHash}` 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](/react-sdk/latest/theming)
- [EnadThemeProvider component page](/react-sdk/latest/components/layout/enad-theme-provider)
- [React SDK playground bridge](/react-sdk/latest/playground)
- [Troubleshooting](/start/troubleshooting)