GitHub

Wallet Onboarding

PreviousNext

An onboarding flow for new users explaining how to use wallets.

Documentation

Installation

pnpm dlx shadcn@latest add @wallet-kit/onboarding

Usage

import { WalletOnboarding } from "@/components/wallet/onboarding"
 
export default function Demo() {
  return <WalletOnboarding onClose={() => {}} />
}

API Reference

WalletOnboarding

An animated onboarding component that explains how to use crypto wallets to new users.

Props

PropTypeDefaultDescription
onClose() => void-Required. Callback fired when the user wants to close the onboarding (e.g., clicking "Got it").

Behavior

  • Displays step-by-step instructions about wallets
  • Uses animations (via motion) for smooth transitions
  • Provides a "Got it" button to dismiss
  • Designed to educate new users about crypto wallets

Examples

In a Dialog

import { WalletOnboarding } from "@/components/wallet/onboarding"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { useState } from "react"
 
export default function OnboardingDialog() {
  const [open, setOpen] = useState(true)
 
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent>
        <WalletOnboarding onClose={() => setOpen(false)} />
      </DialogContent>
    </Dialog>
  )
}

Toggle Onboarding

import { WalletOnboarding } from "@/components/wallet/onboarding"
import { useState } from "react"
 
export default function Demo() {
  const [showOnboarding, setShowOnboarding] = useState(false)
 
  return (
    <>
      <button onClick={() => setShowOnboarding(true)}>
        Learn about wallets
      </button>
      {showOnboarding && (
        <WalletOnboarding onClose={() => setShowOnboarding(false)} />
      )}
    </>
  )
}
  • The component uses motion for animations
  • Typically used inside dialogs or modals
  • Provides educational content for users new to crypto wallets
  • The onClose callback should handle hiding the component

Last updated 11/21/2025

Wallet ErrorWallet Icon