# Install StepsKit > Install StepsKit with npm, pnpm, yarn, or bun — or one script tag. init() options, CSP, TypeScript, plus guides for React, Next.js, Vue, Rails, WordPress and more. *Source: https://stepskit.com/docs/install* The tour engine is a ~10 KB script served from a CDN and always current — you never version it. What you install is the small loader that fetches it. ## Install the package If your project has a `package.json` and a bundler, this is the install to use. ```bash npm install stepskit ``` The package is a **typed loader**, not the tour engine. It installs a pre-load call queue, fetches the engine from `cdn.stepskit.com`, and gives you a fully typed API. The version you install pins the *loader* — the engine streams from the CDN and is always current, so you never bump this package to pick up an engine fix. **React, Next.js, and Remix** render the component once, at the root of your tree. It renders nothing, loads StepsKit once (StrictMode-safe), and identifies the user when the `user` prop appears or its values change — passing a new object with the same values does not re-identify. ```tsx import { StepsKit } from "stepskit/react"; // Render once, at the root of your app. ``` It already carries `"use client"`, so in the Next.js App Router you can drop it straight into `app/layout.tsx` without turning the layout into a client component: ```tsx import { StepsKit } from "stepskit/react"; export default function RootLayout({ children }) { return ( {children} ); } ``` **Vue, Angular, Svelte, Astro, and any other bundled app** call `init()` once, at the entry point. It's SSR-safe (a no-op on the server) and idempotent — calling it twice injects nothing. ```ts import stepskit from "stepskit"; // Call once, at your app's entry point. SSR-safe and idempotent. stepskit.init("YOUR_API_KEY"); ``` Where that entry point is differs per framework — `main.ts` for Vue, a client-only plugin for Nuxt, `app.config.ts` for Angular. The [framework guides](#pick-your-framework) below name the exact file, and the quirks of each that silently break the install. **WordPress, a CMS theme, Google Tag Manager, plain HTML, or a server-rendered app with no JavaScript build** get the ` ``` It loads the same engine and behaves identically at runtime. The snippet queues API calls made before the engine arrives, so `stepskit.identify()` on the next line is safe. Pick one. Running the package *and* the snippet loads two embed instances. ## Identify the visitor Adding the loader is the first half. **Identifying the visitor is the second, and it is not optional.** ```ts import stepskit from "stepskit"; stepskit.identify({ id: user.id, email: user.email, plan: user.plan }); ``` `id` is the only required key. Call it once, when your auth state resolves — calls made before the engine finishes loading, or even before `init()`, are queued and replayed in order, so identity is always set before the first tours fetch. Without an `id`, StepsKit can't tell one visitor from the next. Show-once capping degrades to a per-tab check that dies with the tab, and an audience set to "filtered" is hidden outright — the matcher gives up before it evaluates a single rule, so nothing matches, not even a negative one. The install still verifies as connected. It is still broken. Every guide below treats `identify()` as a numbered step for that reason. See [visitor identification](/docs/concepts/visitor-identification.md) for the full picture. ## Options ```ts stepskit.init("YOUR_API_KEY", { apiUrl: "https://stepskit.your-domain.com", // self-hosted / local API origin debug: true, // [StepsKit] info logs user: { id: "user_123" }, // identify as part of init nonce: cspNonce, // CSP nonce for the injected