Installation

@stridge/kit is a single npm package shipped as ESM, typed end-to-end, with a small set of subpath entries for compound parts, dialogs, hooks, primitives, theming, i18n, and events.

Install the package

pnpm add @stridge/kit

Package	Range	When required
`react`	`^19.0.0`	Always. The Kit relies on React 19 features (`use(Ctx)`, ref-as-prop).
`react-dom`	`^19.0.0`	Always.
`viem`	`>=2.48.1 <3`	Always. Address types and EVM utilities.
`wagmi`	`>=3.6.3 <4`	When you enable the deposit wallet method (paying from a connected EOA). The Kit reads wagmi via an optional bridge, so withdraw-only / QR-only integrations don't need it.

The Kit's wagmi integration is opt-in by environment. If you never enable the deposit-wallet method, you can ship without wagmi installed. The Kit will detect the missing context and gate the wallet tile gracefully instead of throwing.

Import the global stylesheet

The Kit ships one CSS file containing every design token (--stridge-kit-*) and the four radius presets. Import it once at your app's entry — typically your root layout for Next.js, your main.tsx for Vite, or wherever you import global styles.

@import "@stridge/kit/styles.css";

app/layout.tsx — Next.js

import "@stridge/kit/styles.css"
import "./globals.css"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

The Kit's CSS is scoped — it only matches inside [data-stridge-scope], which the provider writes on its root wrapper, so it never bleeds into the rest of your app. See Theming & CSS variables for the full token reference.

Get a gateway key

The Kit authenticates with a gateway key — a browser-safe, project-scoped identifier you generate from the Stridge Dashboard.

Open the Dashboard

Open the connection settings

Navigate to Developer → Gateway Kit → Connection. The page lists every key your workspace has and lets you mint new ones.

Lock the key down

Before shipping, configure the security settings on the same page:

Origin allowlist — the only domains permitted to call the gateway with this key.
Destination address whitelist — the only settlement addresses funds can route to.
Owner-pegged destination — force every deposit to settle back to the depositor's own wallet (the same-owner pattern).

See Gateway Kit security for what each control buys you.

Expose it via an env var

The key is browser-safe, so it ships in the bundle. The Kit conventionally reads it from a public env var:

.env.local

NEXT_PUBLIC_STRIDGE_GATEWAY_KEY=<your-key>

Subpath entry points

The Kit splits its surface across subpaths so consumers only import what they use. The bundler tree-shakes anything you don't reach for.

Subpath	What's there
`@stridge/kit`	`<StridgeProvider />`, all hooks (`useDeposit`, `useWithdraw`, snapshots, prefetch), event bus types. No UI ships from this entry.
`@stridge/kit/deposit/dialog`	`<DepositDialog />` — the drop-in deposit flow.
`@stridge/kit/deposit/widgets`	Zero-prop orchestrated deposit widgets — `Deposit`, `AssetPicker`, `AmountEntry`, `ConfirmDeposit`, `TransferCrypto`, `ProcessingState`, `SuccessState`, `ErrorState`, `DepositStatusBanner`, `DepositActivityList`, `DepositActivityDetail`, and `DialogShell`. The default surface for compound integrations.
`@stridge/kit/deposit/compound`	Bare compound parts plus the FSM scaffolding (`Deposit.Boundary` / `.Guards` / `.Steps` / `.Step`). Reach for these when you need to wire data by hand or to mount the FSM router.
`@stridge/kit/withdraw/dialog`	`<WithdrawDialog />` — the drop-in withdraw flow.
`@stridge/kit/withdraw/widgets`	Zero-prop orchestrated withdraw widgets — `WithdrawForm`, `WithdrawInProgress`, `WithdrawSuccess`, `WithdrawError`, `WithdrawActivityList`, `WithdrawActivityDetail`.
`@stridge/kit/withdraw/compound`	Bare withdraw compound parts + the FSM scaffolding (`Withdraw.Boundary` / `.Guards` / `.Steps` / `.Step`).
`@stridge/kit/activity/dialog`	`<ActivityDialog />` — the drop-in standalone activity surface (read-only settlement history).
`@stridge/kit/activity/widgets`	Zero-prop orchestrated activity widgets — `ActivityList`, `ActivityDetail`, and `DialogShell`.
`@stridge/kit/activity/compound`	`Activity`, `ActivityDetail`, `ActivityFlow` scaffolding (`ActivityFlow.Boundary` / `.Steps` / `.Step`), slot constants, and payload types — the bare layer the deposit / withdraw activity widgets wrap.
`@stridge/kit/ui`	23 lower-level primitives (`Button`, `Card`, `Dialog`, `Select`, `AmountInput`, `TokenLogo`, …).
`@stridge/kit/icons`	The Kit's custom SVG icon set.
`@stridge/kit/wallet`	`useWalletState()` and `ConnectWalletConfig`.
`@stridge/kit/format`	Locale-aware formatters (`formatTokenAmount`, `formatUsd`, …).
`@stridge/kit/events`	Typed event bus and subscription hooks.
`@stridge/kit/i18n`	`createKitI18n`, `defineMessages`, hooks.
`@stridge/kit/i18n/locales/*`	Per-locale catalog imports (e.g. `…/locales/es`).
`@stridge/kit/types`	Exhaustive type catalog (every payload, every FSM type, every DTO).
`@stridge/kit/styles.css`	The global stylesheet.

Verify the install

A 10-second sanity check before you start building:

import { StridgeProvider, useDeposit } from "@stridge/kit"
import { DepositDialog } from "@stridge/kit/deposit/dialog"

function OpenButton() {
  const { open } = useDeposit()
  return <button onClick={() => open()}>Open deposit</button>
}

export function App() {
  return (
    <StridgeProvider
      gatewayKey={process.env.NEXT_PUBLIC_STRIDGE_GATEWAY_KEY!}
      asset={{ networkId: "9001", symbol: "USDC" }} // 9001 = Arbitrum One
      flows={{
        deposit: { destination: { address: "0x000…000" } },
      }}
    >
      <OpenButton />
      <DepositDialog />
    </StridgeProvider>
  )
}

If the dialog opens and shows the chain & token picker, the Kit is installed correctly.

Provider — every StridgeProvider prop.
Drop-in dialogs — open + close, onSubmit contract for withdraw.
Theming & CSS variables — restyle the Kit to match your app.

Was this page helpful?