KeyStone Elements

Packages

Package	What it does	When to use
`@keystoneos/react`	React hooks and provider (headless)	You want full UI control with your own components
`@keystoneos/react-ui`	Pre-built styled components	You want drop-in widgets that just work
`@keystoneos/elements-core`	Framework-agnostic core	You’re not using React, or building a custom integration
`@keystoneos/node`	Server-side helpers	Creating session tokens, handling webhooks

Integration Tiers

Elements supports three integration patterns depending on how your platform handles custody and signing:

Tier 1: View-Only

Your backend handles everything via the SDK and webhooks. The frontend only displays settlement status.

import { KeystoneProvider, useSettlement } from '@keystoneos/react';

function SettlementTracker({ id }) {
  const { settlement, isLoading } = useSettlement(id);
  if (isLoading) return <Spinner />;
  return <div>State: {settlement.state}</div>;
}

Tier 2: Interactive + Custody (Most Common)

The widget collects user decisions (confirm, deposit). Deposit execution routes through your backend to a custody provider like Fireblocks or BitGo.

<KeystoneProvider
  sessionToken={token}
  actionDelegates={{
    onDepositRequired: async (leg, info) => {
      // Your backend submits to Fireblocks
      const result = await fetch('/api/deposit', {
        method: 'POST',
        body: JSON.stringify(info),
      }).then(r => r.json());
      return { txHash: result.txHash };
    },
  }}
>
  <YourSettlementUI />
</KeystoneProvider>

Tier 3: Full Self-Service

End-users connect their own wallets. The widget handles on-chain transactions directly via wagmi.

<WagmiProvider config={wagmiConfig}>
  <KeystoneProvider sessionToken={token}>
    <YourSettlementUI />
  </KeystoneProvider>
</WagmiProvider>

Install and set up your first integration in 5 minutes.

Overview

Backend SDKs

Frontend Library

Tools

Packages

Integration Tiers

Tier 1: View-Only

Tier 2: Interactive + Custody (Most Common)

Tier 3: Full Self-Service

How It Works

Getting Started

Hooks Reference

​Packages

​Integration Tiers

​Tier 1: View-Only

​Tier 2: Interactive + Custody (Most Common)

​Tier 3: Full Self-Service

​How It Works

Getting Started

Hooks Reference

Packages

Integration Tiers

Tier 1: View-Only

Tier 2: Interactive + Custody (Most Common)

Tier 3: Full Self-Service

How It Works