> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cskn.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# UIProvider

> The root provider: theme, platform context, safe area, toasts, dialogs and TV navigation.

Wrap your app once, inside the SDK's `QueryClientProvider`.

```tsx theme={null}
import { UIProvider } from '@cskn/ui';

<QueryClientProvider client={queryClient}>
  <UIProvider theme={{ colors: { light: { primary: '#ff5436' } } }}>
    <App />
  </UIProvider>
</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

<ParamField path="theme" type="DeepPartial<Theme>">
  Token overrides. Only the fields you set change. See [Theming](/ui/theming).
</ParamField>

<ParamField path="colorScheme" type="'light' | 'dark' | 'system'" default="'system'">
  Force a color mode. `system` follows the OS preference.
</ParamField>

<ParamField path="env" type="'web' | 'mobile' | 'desktop' | 'tv'">
  Force the host kind instead of detecting it, for example `env="tv"` to try TV navigation in a desktop browser.
</ParamField>

<ParamField path="reset" type="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.
</ParamField>

Providers can be nested; an inner provider's tokens apply only inside it.

## useUI

```tsx theme={null}
import { useUI } from '@cskn/ui';

const { env, os, isTV, insets, theme } = useUI();
```

<ResponseField name="env" type="'web' | 'mobile' | 'desktop' | 'tv'">
  Host kind. A TV browser with no shell (webOS or Tizen loaded directly) is reported as `tv` too.
</ResponseField>

<ResponseField name="os" type="string | null">
  The operating system; `null` until the platform check resolves.
</ResponseField>

<ResponseField name="isTV" type="boolean">
  Running on a TV. Layouts usually go bigger and every control must be focusable.
</ResponseField>

<ResponseField name="insets" type="{ top, right, bottom, left }">
  Live safe-area insets from the shell, in CSS px. See [Safe area](/ui/safe-area).
</ResponseField>

<ResponseField name="theme" type="Theme">
  The resolved theme (defaults merged with your overrides). `useTheme()` returns just this.
</ResponseField>

`useUI` throws outside a `UIProvider`.

The provider's wrapper also carries `data-cskn-env="<env>"`, so you can target a surface from CSS:

```css theme={null}
[data-cskn-env="tv"] .card { font-size: 1.25rem; }
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.