Connect button
A drop-in connect button with connecting, connected, and error states handled — wired to your wallet stack through typed props.
← All products
Component libraryInstant access
Web3 Onboarding Kit
Drop-in React components for the hardest UX problem in Web3 — getting users from a landing page to their first signed transaction without losing them.
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. 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 Web3
From landing page to first signed transaction.
Most Web3 apps lose 80%+ of interested users somewhere between the landing page and their first signed transaction. 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.
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.
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
Connect a wallet
MetaMask · 0xAB…7d
Fund your wallet
100 USDC received
Review your transaction
Reading calldata… translated
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.
Frequently asked
About the kit.
- How is this different from RainbowKit / ConnectKit / Privy?
- Those tools cover the wallet connect button. The Web3 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.