> ## 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.

# @cskn/ui

> A platform-aware UI kit: one codebase that behaves correctly on web, mobile, desktop and TV.

`@cskn/ui` sits on top of `@cskn/sdk`. The SDK knows which platform you are on; the UI kit uses that to give every component the right behavior there: safe-area padding under a notch, a native header in a shell, keyboard avoidance, haptics on tap, and remote-control navigation on TV.

It is built to keep your app's own identity. Take only the behavior primitives and style them yourself, or use the themed components and recolor them to your brand with a few tokens.

## Layers

| Layer | Contents | Use it when |
| - | - | - |
| **Layout** | `Stack`, `Row`, `Grid`, `Spacer`, `Show`, `Hide` | Always. They prevent horizontal overflow on narrow screens. |
| **Primitives** | `Screen`, `Header`, `Pressable`, `Sheet`, `Modal`, `Popover`, `PullToRefresh`, `Toast`, `Skeleton`, `Spinner`, `FocusScope` | Always. Nearly unstyled; they standardize behavior. |
| **Themed components** | `Button`, `Input`, `Card`, `List`, `TabBar`, `Sidebar`, `Dialog`, `Menu` and about 40 more | When you want speed. Styled entirely from `--cskn-*` tokens. |
| **Data** | `Table`, `ProgressBar`, `Sparkline`, `BarChart`, `LineChart`, `DonutChart`, `Legend` | Tables and charts, with a color-vision-safe palette. |
| **Profile integration** | `AppSettings`, `WidgetSettings`, widget renderers, `ThemeHost`, `ThemeSettings` | Your settings screen and the user page. |
| **Escape hatches** | `useUI`, `color()`, `var(--cskn-*)`, `useBreakpoint`, `insetCss`, `useFocusable`, `tokenManifest` | Building your own components on the same foundations. |

## Minimal app

```tsx theme={null}
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { UIProvider, Screen, Header, Stack, Card, Button, useToast } from '@cskn/ui';

const queryClient = new QueryClient();

export default function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <UIProvider theme={{ colors: { light: { primary: '#ff5436' } } }}>
        <Home />
      </UIProvider>
    </QueryClientProvider>
  );
}

function Home() {
  const toast = useToast();
  return (
    <Screen padded>
      <Header title="Library" />
      <Stack gap={16}>
        <Card>Your books</Card>
        <Button block onClick={() => toast.success('Added')}>Add a book</Button>
      </Stack>
    </Screen>
  );
}
```

<CardGroup cols={2}>
  <Card title="UIProvider" icon="sitemap" href="/ui/provider">What the root provider sets up.</Card>
  <Card title="Theming" icon="palette" href="/ui/theming">Make the kit look like your app.</Card>
</CardGroup>


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