Skip to main content
Wrap your app once, inside the SDK’s QueryClientProvider.
UIProvider:
  • merges your theme overrides with the defaults and publishes them as --cskn-* CSS variables, scoped to its own wrapper;
  • injects the component stylesheet and an optional reset;
  • exposes the host kind, OS and live safe-area insets through useUI();
  • hosts the toast outlet (useToast) and the confirm dialog (useConfirm);
  • starts remote-control navigation when running on a TV.

​
Props

​
DeepPartial<Theme>
Token overrides. Only the fields you set change. See Theming.
​
'light' | 'dark' | 'system'
default:"'system'"
Force a color mode. system follows the OS preference.
​
'web' | 'mobile' | 'desktop' | 'tv'
Force the host kind instead of detecting it, for example env="tv" to try TV navigation in a desktop browser.
​
boolean
default:"true"
Inject a normalize layer: heading and paragraph margins removed, font: inherit on form controls, block-level images and SVGs, button and link resets. Every rule has zero specificity (:where()), so your styles and the components always win. Pass false if your app relies on browser defaults.
Providers can be nested; an inner provider’s tokens apply only inside it.

​
useUI

​
'web' | 'mobile' | 'desktop' | 'tv'
Host kind. A TV browser with no shell (webOS or Tizen loaded directly) is reported as tv too.
​
string | null
The operating system; null until the platform check resolves.
​
boolean
Running on a TV. Layouts usually go bigger and every control must be focusable.
​
{ top, right, bottom, left }
Live safe-area insets from the shell, in CSS px. See Safe area.
​
Theme
The resolved theme (defaults merged with your overrides). useTheme() returns just this.
useUI throws outside a UIProvider. The provider’s wrapper also carries data-cskn-env="<env>", so you can target a surface from CSS: