Developers

Gateway Kit

Your on-chain app runs on one asset, on one chain — say USDC on Arbitrum. Your users don't. They show up holding ETH on Base, USDT on BNB Smart Chain, whatever the last app paid them. Normally closing that gap is the user's problem: bridge, swap, switch networks, then come back and hope they got it right.

@stridge/kit closes it for them. It is the React component library for the Stridge Gateway: mount <StridgeProvider /> once, drop in <DepositDialog />, and a user can pay with any token on any supported chain while their own wallet ends up funded with the exact asset your app needs — ready to use, no manual bridging. <WithdrawDialog /> runs the same flow in reverse to cash out.

See it working at demo.stridge.com; the headless demo drives the same flows from a custom UI through the Kit's hooks. For worked integrations — a prediction market, a trading app, a DeFi app — see Usecases.

Four integration tiers

The Kit is four concentric APIs over the same FSM, settlement watcher, and design system. Pick how much you want to own — they escalate from "own nothing" to "own everything".

Drop-in dialogsOne component, full flow. <DepositDialog /> and <WithdrawDialog /> render every screen — picker, amount entry, confirm, processing, success, error — themed by your appearance prop. The Kit owns everything; you mount one component.
SkinRestyle every Kit surface without forking. Override ~80 --stridge-kit-* CSS variables for color, radius, spacing, typography, motion, or target individual sub-parts via data-stridge-slot selectors. You own the visual layer; the Kit owns the structure, FSM, and behavior.
Compound componentsSame FSM, your structure. Zero-prop orchestrated widgets that read driver state for you (AssetPicker, AmountEntry, SuccessState, ErrorState, …) plus FSM scaffolding from @stridge/kit/{flow}/compound. Compose into your own layout, interleave your own JSX between Kit parts. Bootstrap with the shadcn registry to start from canonical wrappers you own and edit.
Headless integrationNo Kit UI at all. useDeposit, useDepositState, useDepositSnapshot (and the withdraw mirrors) expose the controller, FSM state, and driver snapshot. You render whichever UI fits your app; the Kit only owns the state machine and the gateway calls underneath.

All four tiers reuse the same provider, the same FSM, the same settlement watcher, the same CSS-variable theme — start drop-in and graduate to skin, compound, or headless without rewriting the integration. Tiers also compose — a skinned drop-in stays a drop-in, a skinned compound is the most common production shape, and a headless integration can still reuse the Kit's design tokens for visual consistency. The shadcn registry is the recommended way to bootstrap a compound integration: pnpm dlx shadcn@latest add @stridge/kit drops the canonical composition into components/stridge/ so you start with files you own and edit.

What's in the box

  • Drop-in dialogs — themed <DepositDialog /> and <WithdrawDialog /> covering the entire flow from picker to success state. See Drop-in dialogs.
  • Orchestrated widgets + bare compound parts — Deposit, AssetPicker, AmountEntry, ConfirmDeposit, WithdrawForm, SuccessState, ErrorState, ProcessingState, deposit/withdraw activity widgets, and more from @stridge/kit/{deposit,withdraw}/widgets; FSM scaffolding (Deposit.Boundary / .Guards / .Steps / .Step, withdraw mirrors) from @stridge/kit/{deposit,withdraw}/compound. See Compound components.
  • Headless hooks — useDeposit(), useDepositState(), useDepositSnapshot(), useWithdraw(), useWithdrawState(), useWithdrawSnapshot() for teams that want to render their own UI. See Headless integration.
  • CSS-variable theming — ~80 --stridge-kit-* tokens (color, radius, spacing, typography, motion, shadow) plus four radius presets and an accent runtime override. See Theming & CSS variables.
  • Data-attribute slots — every meaningful element carries a stable data-stridge-slot="<name>" so host CSS can target sub-parts without forking. See Data attributes & slots.
  • shadcn registry — pnpm dlx shadcn@latest add @stridge/kit --registry https://registry.ui.stridge.com/r drops the kit's composition stubs into components/stridge/. See shadcn registry.
  • i18n — Lingui-backed locales with auto-derived RTL, plus a defineMessages helper for overrides. See Internationalization.
  • Typed event bus — @stridge/kit/events exports a flow / UI / kit-tier event union and useStridgeFlowEvents for analytics. See Events.
  • UI primitives — @stridge/kit/ui ships 23 lower-level building blocks (Button, Card, Dialog, Select, AmountInput, TokenLogo, …) you can compose into bespoke UIs. See UI primitives & types.

One provider configures everything

App.tsx
import { StridgeProvider } from "@stridge/kit"
import { DepositDialog } from "@stridge/kit/deposit/dialog"

export function App({ userWallet }: { userWallet: `0x${string}` }) {
  return (
    <StridgeProvider
      gatewayKey={process.env.NEXT_PUBLIC_STRIDGE_GATEWAY_KEY!}
      // Settlement asset. `networkId` is the Stridge network id — see Supported networks.
      // 9001 = Arbitrum One.
      asset={{ networkId: "9001", symbol: "USDC" }}
      flows={{
        deposit: { destination: { address: userWallet } },
      }}
      appearance={{ accent: "oklch(64.51% 0.19 274.49)", radius: "rounded" }}
    >
      <YourApp />
      <DepositDialog />
    </StridgeProvider>
  )
}

That's the entire wiring. Call useDeposit().open() from any descendant to open the dialog; settle to flows.deposit.destination.address. See Provider for every prop and Installation for the install + stylesheet steps.

Note

The Kit runs client-side; the gateway key is browser-safe. Lock it down from the Stridge Dashboard — an origin allowlist restricts which domains may use it, destination-address whitelisting limits where funds can settle, and the owner-pegged destination option forces every deposit back to the depositor's own wallet. See Gateway Kit security for the full model.

Where to go next

Was this page helpful?