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

# Introduction

> Build mini apps that run unchanged on the web, in the cskn mobile and desktop apps, and on TV.

A cskn mini app is a React web app that the platform serves in several places at once: on its own host (`<slug>.cskn.app`), on its owner's profile (`<username>.cskn.my/<slug>`), inside the native mobile and desktop shells, and on TV. Two packages make that one codebase work everywhere.

<CardGroup cols={2}>
  <Card title="@cskn/sdk" icon="plug" href="/sdk/overview">
    Talks to the platform. Reads the data the host injects, signs you in, calls the cskn API, and reaches native features (camera, storage, notifications, passkeys and more) through the shell's bridge.
  </Card>

  <Card title="@cskn/ui" icon="palette" href="/ui/overview">
    A platform-aware component kit. Behavior primitives (safe area, native header, keyboard avoidance, TV remote navigation) plus an optional themed skin you can recolor to your brand.
  </Card>
</CardGroup>

## How the pieces fit

```mermaid theme={null}
flowchart LR
  subgraph Host["Host (web worker or native shell)"]
    D["window.cskn<br/>app data"]
    B["window.cskn.bridge<br/>native features"]
  end
  subgraph App["Your mini app"]
    SDK["@cskn/sdk"]
    UI["@cskn/ui"]
  end
  API[("api.csknapps.xyz")]
  D --> SDK
  B <--> SDK
  SDK --> API
  SDK --> UI
```

* The **host** writes app data into `window.cskn` before your code runs, and a native shell also attaches a message bridge at `window.cskn.bridge`.
* **@cskn/sdk** reads both, and every native call degrades safely, or tells you clearly, when there is no bridge.
* **@cskn/ui** builds on the SDK's platform information to pick the right behavior on each surface.

## Where to start

<CardGroup cols={3}>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Scaffold an app and render your first screen.
  </Card>

  <Card title="Surfaces" icon="layer-group" href="/concepts/surfaces">
    Understand where your app runs and what changes between surfaces.
  </Card>

  <Card title="Authentication" icon="key" href="/concepts/authentication">
    Get the signed-in user on every surface.
  </Card>
</CardGroup>


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