Quickstart

Scaffold a mini app, sign the user in and render a screen with @cskn/ui.

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

2. 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>,
   );
   
3. 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} />;
   }
   
4. 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>
     );
   }
   
5. 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.