An all-in-one SDK for building frontend applications on VeChain, supporting wallet integration, developer hooks, pre-built UI components, and more.

Introduction

VeChain Kit is a comprehensive SDK designed to make building frontend applications on VeChain fast and straightforward. It offers:

• Seamless Wallet Integration: Support for VeWorld, Sync2, WalletConnect, and social logins (Google, Apple, GitHub, email, passkey via Privy).
• Custom Connection UI: A built-in, themeable connect modal owns the VeWorld and Sync2 flows end-to-end (no dapp-kit modal hand-off). WalletConnect's QR modal is preserved.
• Developer-Friendly Hooks: Easy-to-use React Hooks that let you read and write data on the VeChainThor blockchain.
• Token Operations: Send and swap tokens, check balances, manage VET domains, and more—all in one place.
• Pre-Built UI Components: Ready-to-use components (e.g., TransactionModal) to simplify wallet operations and enhance your users’ experience.

Note: Currently supports React and Next.js only

Resources

• Live Demo
• Documentation

Quicks Start

Install dependencies

Install the core package along with its peer dependencies:

yarn add @vechain/vechain-kit \
  @chakra-ui/react@^2.8.2 \
  @emotion/react@^11.14.0 \
  @emotion/styled@^11.14.0 \
  @tanstack/react-query@^5.64.2 \
  @vechain/[email protected] \
  framer-motion@^11.15.0

Setup Provider

Wrap your app with the VeChainKitProvider:

'use client';

import { VeChainKitProvider } from '@vechain/vechain-kit';

export function Providers({ children }: { children: React.ReactNode }) {
    return (
        <VeChainKitProvider>
            {children}
        </VeChainKitProvider>
    );
}

That's it! Your app is now ready to connect to VeChain mainnet with VeWorld wallet.

Add Wallet Button

'use client';

import { WalletButton } from '@vechain/vechain-kit';

export function Page() {
    return <WalletButton />;
}

Customize the login modal

The connect modal renders a grid of login methods. Reorder, hide, or swap them via loginMethods on the provider:

<VeChainKitProvider
    privy={{ appId: '...', clientId: '...', loginMethods: ['google', 'apple', 'email'], appearance: {...} }}
    dappKit={{ allowedWallets: ['veworld', 'sync2', 'wallet-connect'], walletConnectOptions: {...} }}
    loginMethods={[
        { method: 'veworld', gridColumn: 4 },         // primary CTA (filled, recommended)
        { method: 'google',  gridColumn: 4 },
        { method: 'apple',   gridColumn: 4 },
        { method: 'more',    gridColumn: 4 },         // opens an in-modal sub-view with overflow socials, wallets, ecosystem apps
    ]}
    // Optional: theme the brand accent (spinner, focus rings, "Waiting for signature…" headline)
    theme={{ accent: '#3b82f6' }}
>

Available method values: veworld, sync2, wallet-connect, google, apple, github, email, passkey, vechain (cross-app), ecosystem, more, and the legacy dappkit (which still opens dapp-kit's native modal for backwards compatibility).

For complete configuration options, check the full documentation.

Troubleshooting

Are you having issues using the kit?

• Check our Troubleshooting section.
• Contact us on Discord
• Open an issue on Github