Ray Group
← All products
Instant accessComponent library

Guide users from connect wallet, wrong network, first fund, and first signed tx without the drop-off.

Drop-in React components for the hardest UX problem in trading products - getting users from a landing page to their first action without losing them. Built for wallet-native and crypto-rail flows; the patterns transfer to trading onboarding.

View pricingSee the previews

Component preview · WalletChoiceModal

Connect a wallet

Connect a wallet
  • MetaMaskInstalled
  • RabbyInstalled
  • WalletConnectQR code

Component preview · FirstTransactionGuide

Step 3 of 4 · ~30 seconds left

A typed event on every step - forward to whatever analytics you already run. Drop-off is measured, not guessed at.

  1. Connect a wallet
  2. Fund your wallet
  3. Review your transaction

Live previews

Four steps, no lost users.

Static previews of the kit's patterns in context - the steps that actually decide whether a curious visitor signs their first transaction.

Component preview · WalletChoiceModal

Connect a wallet

Don't have one? Skip straight to social login.

Use what you've got

  • MetaMaskInstalled
  • Coinbase WalletInstalled
  • WalletConnectQR code

No wallet? Start here

  • Continue with emailPasskey-secured wallet, ~10 secondsRecommended
  • Continue with GoogleSocial login + embedded wallet

Embedded wallets are non-custodial - keys stay in the browser. We surface that here, not in a footer.

Pattern preview · Fund with fiat (bring your own on-ramp)

Fund your wallet

Provider-agnostic on-ramp picker with honest cost breakdowns.

  • MoonPay$2.402–5 min
  • Transak$2.105–10 min
  • Banxa$1.80~15 min
Total cost
$102.40
You receive
100.00 USDC

Component preview · FirstTransactionGuide

Your first transaction

Step 3 of 4 · ~30 seconds left

  1. Connect a wallet

    MetaMask · 0xAB…7d

  2. Fund your wallet

    100 USDC received

  3. Review your transaction

    Reading calldata… translated

  4. Sign and confirm

    Waiting for previous step

A typed event on every step - forward to whatever analytics you already run. Drop-off is measured, not guessed at.

Component preview · ApprovalExplainer

Sign this transaction

Calldata translated into plain English.

What you're doing

Swap 100 USDC → at least 0.001631 BTC

Going to

DEX Router

0x39c2…f421

Verified · audited

Network fee
~$0.42
Price impact
0.03%
Max slippage
0.5%

⚠ Approval: Lets the router spend 100 USDC. Revocable any time.

Static previews. The live components - typed, self-contained, themable - are in the library the moment you buy.

What it is

A set of React + TypeScript + Tailwind components covering every step from wallet connect to a user's first signed transaction - connect button, wallet choice modal, network switch prompt, address display, first-transaction guide, approval explainer, status tracker, and onboarding checklist - plus a flow assembly guide. Built for trading apps with crypto rails; the guided-first-action patterns transfer more broadly. DeFi UX MCP Pro ($29/mo value) is included.

How it works

Pay once, get instant email access to the library. Copy src/ into your app, follow the flow assembly guide from connect through first signed transaction, and pass your wallet state through typed props - the components are self-contained, with no wallet-stack lock-in.

Why it's worth it

One price, everything included - no open-core split, no paid analytics tier. The components encode the moments most apps lose users - wrong network, scary approvals, silent pending states - with the reasoning documented and the MCP Pro corpus to query it.

The hardest UX problem in trading onboarding

From landing page to first signed transaction.

Most trading and Web3 apps lose 80%+ of interested users somewhere between the landing page and their first signed action. The breakage isn't in any one component - it's in the dozen transition points between them. The Onboarding Kit is the set of components and flows that close those gaps - self-contained React, with your wallet state arriving through typed props.

Core stack

  • TypeScript
  • React
  • Tailwind CSS

Works alongside

  • wagmi
  • viem
  • RainbowKit
  • ConnectKit
  • Privy

Bring your own wallet stack - wagmi, viem, RainbowKit, ConnectKit, Privy, or anything else. The components take connection and transaction state through typed props and stay out of your data layer.

What's in the kit

Every step from connect to confirmed.

Connect button

A drop-in connect button with connecting, connected, and error states handled - wired to your wallet stack through typed props.

Wallet choice modal

A modal that helps users who don't know which wallet they need - installed wallets first, embedded and social options explained in plain language, no seed-phrase jargon.

Network switch prompt

Detects the wrong-network state and walks users through switching - the silent failure mode that kills more first sessions than any other.

Address display

Truncated addresses with copy affordance and explorer links - consistent everywhere an address appears, so users learn one pattern.

First-transaction guide

A step-by-step guide component from connected wallet to first signed transaction - with progress indicators, recoverability, and a typed event on every step.

Approval explainer

Translates token approvals into plain language - what's being approved, for how much, and how to revoke it later.

Transaction status tracker

Pending, confirmed, failed, replaced - statuses users can actually read, with next steps on failure instead of a spinner that never resolves.

Onboarding checklist

A persistent checklist that shows new users where they are in the journey and what comes next - the backbone the flow guide assembles.

Frequently asked

About the kit.

How is this different from RainbowKit / ConnectKit / Privy?
Those tools cover the wallet connect button. The Onboarding Kit covers everything that comes after it - wallet choice for people who don't have one, network switching, approvals users understand, transaction status, and the first-transaction guide. It works alongside RainbowKit / ConnectKit / Privy; the components take your connection state through typed props.
Will it work with my existing wallet stack?
Yes - that's the design constraint. The components have no wagmi, viem, or provider dependency; connection and transaction state arrive via typed props, so they sit on top of whatever stack you already run.
Open source or paid?
One price, everything included. There's no open-core split and no paid analytics tier - one purchase covers all the components, the flow assembly guide, and updates. DeFi UX MCP Pro is included, with your key in the purchase email.
When do I get access?
Immediately. Pay once, get an access token by email, and copy the components into your repo the same day. 14-day refund if you have not used the library.

Get access

Pay once. Ship onboarding this sprint.

No waitlist, no tiers. After checkout you receive an email with a library link, access token, and your DeFi UX MCP Pro key. Copy the components in and follow the flow assembly guide.

View pricingAlready purchased? Sign in