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

# Quickstart

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

<Steps>
  <Step title="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:

    ```bash theme={null}
    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.
  </Step>

  <Step title="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:

    ```tsx main.tsx theme={null}
    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>,
    );
    ```
  </Step>

  <Step title="Get the signed-in user">
    Call `useBridgeAuth` once near the root, and only fetch the profile when it reports `isReady`.

    ```tsx theme={null}
    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} />;
    }
    ```
  </Step>

  <Step title="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.

    ```tsx theme={null}
    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>
      );
    }
    ```
  </Step>

  <Step title="Run it">
    ```bash theme={null}
    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](/concepts/app-data#local-development)). Native features report themselves unavailable in a plain browser; open the app in the cskn mobile or desktop app to exercise them.
  </Step>
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card title="Surfaces" icon="layer-group" href="/concepts/surfaces">
    The template splits the app page from the user page, and the shell from the browser. Here is why.
  </Card>

  <Card title="Native features" icon="mobile" href="/sdk/native/overview">
    Camera, storage, notifications and the rest, with what each one does off-shell.
  </Card>
</CardGroup>


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