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

# Installation

> Add @cskn/sdk and @cskn/ui to a project.

## Install from npm

Both packages are published on npm as [`@cskn/sdk`](https://www.npmjs.com/package/@cskn/sdk) and [`@cskn/ui`](https://www.npmjs.com/package/@cskn/ui). Install them together with their peer dependencies:

<CodeGroup>
  ```bash npm theme={null}
  npm install @cskn/sdk @cskn/ui react react-dom @tanstack/react-query axios zustand
  ```

  ```bash pnpm theme={null}
  pnpm add @cskn/sdk @cskn/ui react react-dom @tanstack/react-query axios zustand
  ```

  ```bash yarn theme={null}
  yarn add @cskn/sdk @cskn/ui react react-dom @tanstack/react-query axios zustand
  ```

  ```bash bun theme={null}
  bun add @cskn/sdk @cskn/ui react react-dom @tanstack/react-query axios zustand
  ```
</CodeGroup>

`@cskn/ui` builds on `@cskn/sdk`, so install the SDK even if you only use the UI kit. If you only need the SDK, leave out `@cskn/ui`.

<Warning>
  The version on npm today, `0.0.1`, is a **placeholder that exports nothing**. It reserves the package names. The first usable release will be `0.1.0`. Until it is out, use [Install from source](#install-from-source) below.
</Warning>

### Peer dependencies

Your app provides these, so there is a single copy of each:

| Package | Version |
| - | - |
| `react`, `react-dom` | 19 |
| `@tanstack/react-query` | 5 |
| `axios` | 1 |
| `zustand` | 5 |

## Install from source

Until the first release on npm, the packages are consumed from source through a bundler and TypeScript alias. [`create-cskn-app`](/quickstart) sets this up for you; the steps below are for adding them to a project by hand. You still need the [peer dependencies](#peer-dependencies).

### Vite alias

Point both package names at their `src` folders, and dedupe the shared libraries so the app and the packages use one copy of each:

```ts vite.config.ts theme={null}
import path from 'node:path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  base: '/my-app/', // your app slug
  plugins: [react()],
  resolve: {
    alias: {
      '@cskn/sdk': path.resolve(__dirname, '../../sdk/src'),
      '@cskn/ui': path.resolve(__dirname, '../../ui/src'),
    },
    dedupe: ['react', 'react-dom', 'zustand', '@tanstack/react-query'],
  },
});
```

<Warning>
  Leaving out `dedupe` gives you two copies of React or TanStack Query. The usual symptom is an "invalid hook call" error, or queries that never share a cache.
</Warning>

### TypeScript paths

```jsonc tsconfig.json theme={null}
{
  "compilerOptions": {
    "paths": {
      "@cskn/sdk": ["../../sdk/src/index.ts"],
      "@cskn/sdk/*": ["../../sdk/src/*"],
      "@cskn/ui": ["../../ui/src/index.ts"],
      "@cskn/ui/*": ["../../ui/src/*"]
    }
  }
}
```

## Asset base vs. router base

`base: '/<slug>/'` in Vite is where your **assets** are served from, and it is correct on every host. Where your **router** is mounted is not something the build can know: the same bundle is served at the root of `<slug>.cskn.app` and under `/<slug>` on a creator's page. Pass `appBasename()` to your router instead of hard-coding it:

```tsx theme={null}
import { BrowserRouter } from 'react-router-dom';
import { appBasename } from '@cskn/sdk';

<BrowserRouter basename={appBasename()}>{/* routes */}</BrowserRouter>
```

See [URLs and routing](/sdk/urls) for the details.


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