@cskn/ui

@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

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>
  );
}

UIProvider

What the root provider sets up.

Theming

Make the kit look like your app.

Overview

Components

Platform

Profile integration

Layers

Minimal app

UIProvider

Theming

​Layers

​Minimal app

UIProvider

Theming

Layers

Minimal app