# Installation (/docs/installation)

Install Session kit, a schema library, and the packages your setup needs, then
follow the guide for that setup.

To install the package, run the following command:

```npm
npm install @monarcode/session-kit
```

Alpha releases are published to the `latest` distribution tag and may change
the public API, so pin an exact version and read the
[release notes](https://github.com/monarcode/session-kit/blob/main/CHANGELOG.md)
before upgrading.

Session kit checks each user against a schema from any
[Standard Schema](https://standardschema.dev) library. The examples use Zod.
To install it, run the following command:

```npm
npm install zod
```

Then install React, and the router or framework your setup uses.
[Compatibility](/docs/reference/compatibility) lists every optional peer
dependency and the versions it supports.

## Pick your setup [#pick-your-setup]

Find your setup in the following table. Each one has an import path and a
guide. All but the first also have a runnable app in
[`examples/`](https://github.com/monarcode/session-kit/tree/main/examples)
that signs in against DummyJSON's public test API:

| Setup                                      | Import                                       | Guide                                                                      | Example app                                                                                                                                                                                                                    |
| ------------------------------------------ | -------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| React without a router                     | `@monarcode/session-kit/react`               | [Getting started](/docs/getting-started)                                   | None                                                                                                                                                                                                                           |
| TanStack Router                            | `@monarcode/session-kit/tanstack-router`     | [TanStack Router](/docs/setups/tanstack-router)                            | [`tanstack-router`](https://github.com/monarcode/session-kit/tree/main/examples/tanstack-router)                                                                                                                               |
| TanStack Start, SPA mode                   | `@monarcode/session-kit/tanstack-router`     | [TanStack Router](/docs/setups/tanstack-router#tanstack-start-in-spa-mode) | [`tanstack-start-spa`](https://github.com/monarcode/session-kit/tree/main/examples/tanstack-start-spa), [`tanstack-start-spa-effetch`](https://github.com/monarcode/session-kit/tree/main/examples/tanstack-start-spa-effetch) |
| TanStack Start with server rendering       | `@monarcode/session-kit/tanstack-start`      | [TanStack Start](/docs/setups/tanstack-start)                              | [`tanstack-start-ssr`](https://github.com/monarcode/session-kit/tree/main/examples/tanstack-start-ssr)                                                                                                                         |
| React Router, declarative mode             | `@monarcode/session-kit/react-router`        | [React Router](/docs/setups/react-router#declarative-mode)                 | [`react-router-declarative`](https://github.com/monarcode/session-kit/tree/main/examples/react-router-declarative)                                                                                                             |
| React Router, data mode                    | `@monarcode/session-kit/react-router`        | [React Router](/docs/setups/react-router#data-mode)                        | [`react-router-data`](https://github.com/monarcode/session-kit/tree/main/examples/react-router-data)                                                                                                                           |
| React Router, framework mode, `ssr: false` | `@monarcode/session-kit/react-router`        | [React Router](/docs/setups/react-router#framework-mode-with-ssr-false)    | [`react-router-framework-spa`](https://github.com/monarcode/session-kit/tree/main/examples/react-router-framework-spa)                                                                                                         |
| React Router, framework mode with SSR      | `@monarcode/session-kit/react-router/server` | [React Router with SSR](/docs/setups/react-router-ssr)                     | [`react-router-framework-ssr`](https://github.com/monarcode/session-kit/tree/main/examples/react-router-framework-ssr)                                                                                                         |
| Next.js 16, App Router                     | `@monarcode/session-kit/next`                | [Next.js](/docs/setups/next)                                               | [`next-app`](https://github.com/monarcode/session-kit/tree/main/examples/next-app)                                                                                                                                             |
| Expo Router on iOS and Android, SDK 53+    | `@monarcode/session-kit/expo`                | [Expo Router](/docs/setups/expo)                                           | [`expo-router`](https://github.com/monarcode/session-kit/tree/main/examples/expo-router)                                                                                                                                       |

Two guides apply to more than one setup:

- [Server sessions](/docs/server-rendering/server-sessions) covers what the
  three server-rendered setups share.
- [Effect and effetch](/docs/effect) works with any setup.

## Next steps [#next-steps]

- For a setup that keeps the session in the browser or on the device, start
  with [Getting started](/docs/getting-started). The router guides build on
  its app.
- For a server-rendered setup, start with
  [Server rendering](/docs/server-rendering).