Quickstart

Scaffold the app

create-cskn-app generates a Vite + React project with both packages already wired up. Run it from the deploy/ folder of the cskn repository, so the generated aliases (../../sdk/src, ../../ui/src) resolve:

cd deploy
node ../create-cskn-app/index.js my-app

The slug you pass (my-app) becomes the folder name and the app’s asset base. The vite template is the default; --template expo and --template rnw are also available.

Wrap the app in the providers

The SDK uses TanStack Query, and the UI kit needs UIProvider once at the root. The generated main.tsx already does this:

main.tsx

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { UIProvider } from '@cskn/ui';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <QueryClientProvider client={queryClient}>
    <UIProvider theme={{ colors: { light: { primary: '#1F6F4B' } } }}>
      <App />
    </UIProvider>
  </QueryClientProvider>,
);

Get the signed-in user

Call useBridgeAuth once near the root, and only fetch the profile when it reports isReady.

import { useBridgeAuth, useUser } from '@cskn/sdk';

function Home() {
  const { token, isReady } = useBridgeAuth();
  const { data: user } = useUser({ enabled: isReady && !!token });

  if (!isReady) return null;
  return <Greeting name={user?.name} />;
}

Render a screen

Screen and Header handle the safe area and the fixed header on every surface. Native features such as haptics come from the SDK.

import { Screen, Header, Stack, Card, Button, useToast } from '@cskn/ui';
import { useHaptics } from '@cskn/sdk';

function Greeting({ name }: { name?: string }) {
  const toast = useToast();
  const haptics = useHaptics();

  return (
    <Screen padded>
      <Header title="My app" />
      <Stack gap={16}>
        <Card>Hello {name ?? 'there'}</Card>
        <Button
          block
          onClick={() => {
            haptics.notification('success');
            toast.success('Saved');
          }}
        >
          Save
        </Button>
      </Stack>
    </Screen>
  );
}

Run it

cd my-app && pnpm install && pnpm dev

In development there is no host to inject app data, so the template fills in a stand-in window.cskn (see App data). Native features report themselves unavailable in a plain browser; open the app in the cskn mobile or desktop app to exercise them.

Next steps

Surfaces

The template splits the app page from the user page, and the shell from the browser. Here is why.

Native features

Camera, storage, notifications and the rest, with what each one does off-shell.

Get started

Concepts

Next steps

Surfaces

Native features

​Next steps

Surfaces

Native features

Next steps