Installation

How to install and set up VeChain Kit in your project

Get the template

Only one command to setup

$ npx create-vechain-dapp@latest

? Select template ›
    ❯ VeChain Kit Next.js Template (Chakra, React Query, SDK)

Or you can install the kit in your package as follows.

Quick-start

1

Install @vechain/vechain-kit

yarn add @vechain/vechain-kit

2

Install peer dependencies

VeChain Kit builds on a few carefully chosen libraries to deliver a better overall experience, bringing powerful tools together while keeping the integration on your side as simple as possible.

yarn add @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

3

Setup provider

Wrap your app with the VechainKitProvider at the root of your application.

This provider brings together VeWorld’s native VeChain integration (web3) and Privy’s social login wallet support (web2).

'use client';

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

export function Providers({ children }) {
  return (
    <VeChainKitProvider>
      {children}
    </VeChainKitProvider>
  );
}

4

Enjoy!

With VeChain Kit’s snippets and primitive components, you can plug in wallet login and fetch key data much faster.

"use client";
import { WalletButton } from "@vechain/vechain-kit";


const Demo = () => {
  return (
    <div>
       <WalletButton /> {/* Login Button */}
       <p>{account?.address}</p> {/* Address of the connected account */}
    </div>
  )
}

Only supported on React and Next.js

React query, chakra and dapp-kit are peer dependencies.