Integration Options

The KEA Wallet SDK ships as four npm packages in a layered dependency chain. Each higher-level package includes everything from the layers below it, so you only need to install one package.

tip

Most developers need exactly one package: @kea-wallet/react-ui for React apps, or @kea-wallet/browser-sdk for everything else.

Which Package Do I Need?

note

For advanced use cases requiring direct iframe/postMessage control (e.g., building a custom SDK layer), see @kea-wallet/embedded-provider.

Package Comparison

Package	Best For	Framework	UI Control	Includes
@kea-wallet/react-ui	Fastest start with pre-built wallet UI	React 18+	Themed components	react-sdk + browser-sdk + embedded-provider
@kea-wallet/react-sdk	Custom UI with React hooks & state	React 18+	Full	browser-sdk + embedded-provider
@kea-wallet/browser-sdk	Vanilla JS, Vue, Svelte, Angular, or any non-React project	Any	Full	embedded-provider
@kea-wallet/embedded-provider	Custom SDK development or direct iframe control	Any	Full	—

info

All four packages share the same underlying RPC client, event system, and security model. The difference is the interface layer, not the capabilities.

Integration Paths

Each path below shows what to install and what you get.

React with Pre-built Components

For React apps that want a working wallet UI out of the box.

npm

npm install @kea-wallet/react-ui

yarn

yarn add @kea-wallet/react-ui

pnpm

pnpm add @kea-wallet/react-ui

What you get:

• KeaConnectButton — connect/disconnect button with built-in state display
• KeaAccountSwitcher — multi-account dropdown with address display
• KeaLogo — brand mark component
• All react-sdk hooks: useWallet(), useAccounts(), useKea()
• All browser-sdk methods via the hooks

tip

This is the recommended starting point for React apps. One install gives you components, hooks, and the full SDK.

Next steps: Quickstart | react-ui reference

React with Custom UI

For React apps that need full control over wallet UI and styling.

npm

npm install @kea-wallet/react-sdk

yarn

yarn add @kea-wallet/react-sdk

pnpm

pnpm add @kea-wallet/react-sdk

What you get:

• KeaProvider — context provider that initializes the SDK
• useWallet() — connection state, accounts, connect(), disconnect(), mountInline()
• useAccounts() — read-only account state with onAccountSelect callback
• useKea() — low-level access to the BrowserSDK instance
• No pre-built components — you build the UI yourself

Next steps: Connect Wallet guide | react-sdk reference

Vanilla JS / Any Framework

For Vue, Svelte, Angular, vanilla JavaScript, or any non-React project.

npm

npm install @kea-wallet/browser-sdk

yarn

yarn add @kea-wallet/browser-sdk

pnpm

pnpm add @kea-wallet/browser-sdk

What you get:

• BrowserSDK — full SDK class with connect(), disconnect(), getAccounts(), getSelectedAccount()
• Event system — on() / off() for connect, disconnect, accountChanged, error, lock events
• Chain adapter — getThru() for transaction signing and RPC queries
• Auto-metadata — resolves dApp name and URL from window.location
• Inline mode — mountInline() to embed the wallet in your page

info

There are no official Vue or Svelte wrapper packages. BrowserSDK is framework-agnostic — its event system (on/off) maps naturally to any reactive primitive.

Next steps: Quickstart | browser-sdk reference

Low-Level Provider

For advanced use cases requiring direct iframe lifecycle and postMessage control.

npm

npm install @kea-wallet/embedded-provider

yarn

yarn add @kea-wallet/embedded-provider

pnpm

pnpm add @kea-wallet/embedded-provider

warning

Most developers should use @kea-wallet/browser-sdk or higher. Only use embedded-provider if you are building a custom SDK layer or need direct iframe lifecycle management.

What you get:

• EmbeddedProvider — iframe creation, postMessage protocol, connection state
• EmbeddedThruChain — chain adapter for signing at the transport level

Next steps: embedded-provider reference

Common Questions

Do I need to install transitive dependencies manually?

No. Installing @kea-wallet/react-ui automatically pulls in react-sdk, browser-sdk, and embedded-provider. Never install multiple packages from the chain — you may get duplicate versions.

What React version do I need?

React 18.0+ or React 19.0+. Both react-ui and react-sdk declare React as a peer dependency.

Can I use the UI components without KeaProvider?

No. All @kea-wallet/react-ui components require KeaProvider as an ancestor. The provider initializes the SDK and supplies wallet state via React context.

Is there a Vue or Svelte wrapper?

Not currently. Use @kea-wallet/browser-sdk and integrate with your framework's reactive primitives. The BrowserSDK event system maps naturally to Vue's ref()/watch() or Svelte's stores.

Can I use react-ui components and react-sdk hooks together?

Yes. Install @kea-wallet/react-ui (which includes react-sdk) and import hooks from @kea-wallet/react-sdk alongside components from @kea-wallet/react-ui.

What's Next

• Quickstart — Get a working integration in under 5 minutes
• Connect Wallet — Connection states, session persistence, and custom connect UI
• Sign Transactions — Build and sign Thru L1 transactions
• SDK Reference — Full API documentation for all packages