Installation

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

Install from npm

Both packages are published on npm as @cskn/sdk and @cskn/ui. Install them together with their peer dependencies:

npm

npm install @cskn/sdk @cskn/ui react react-dom @tanstack/react-query axios zustand

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

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

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 sets this up for you; the steps below are for adding them to a project by hand. You still need the 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:

vite.config.ts

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'],
  },
});

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.

TypeScript paths

tsconfig.json

{
  "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:

import { BrowserRouter } from 'react-router-dom';
import { appBasename } from '@cskn/sdk';

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

See URLs and routing for the details.