Install with Vite

Set up PolygonKit in your Vite application

Recommended: Use the CLI

The fastest way to create a Vite app with PolygonKit:

npx create-polygon-kit my-app
# Choose Vite when prompted

This creates a complete Vite app with:

• Pre-configured PolygonKit components
• Wallet connection with WalletConnect
• Pre-built dashboard UI
• TailwindCSS v4 with Vite plugin
• Lightning-fast HMR
• Full TypeScript support

CLI Documentation

Learn more about the CLI and all available options

Manual Installation

If you prefer to add PolygonKit to an existing Vite project manually:

The CLI is recommended for new projects. Manual installation is best for adding PolygonKit to existing Vite apps.

PolygonKit works perfectly with Vite and React.

1. Create a Vite project

   If you don’t have a Vite project yet, create one:

   npm

   npm create vite@latest my-polygon-app -- --template react-ts
   cd my-polygon-app
   
2. Install dependencies

   Install PolygonKit and required peer dependencies:

   npm

   npm install @sanketsaagar/polygon-kit wagmi viem @tanstack/react-query
   
3. Set up the provider

   Wrap your app with PolygonKitProvider in src/main.tsx:

   src/main.tsx

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { PolygonKitProvider } from '@sanketsaagar/polygon-kit';
   import App from './App';
   import './index.css';
   
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
       <PolygonKitProvider>
         <App />
       </PolygonKitProvider>
     </React.StrictMode>,
   );
   
4. Use PolygonKit components

   Update src/App.tsx to use PolygonKit components:

   src/App.tsx

   import {
     ConnectWallet,
     Wallet,
     WalletDropdown,
     Identity,
     usePolygonKit,
   } from '@sanketsaagar/polygon-kit';
   
   function App() {
     const { address, isConnected } = usePolygonKit();
   
     return (
       <div className="min-h-screen bg-gray-50">
         <header className="bg-white shadow">
           <div className="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
             <h1 className="text-2xl font-bold">My Polygon App</h1>
             <Wallet>
               {isConnected ? <WalletDropdown /> : <ConnectWallet />}
             </Wallet>
           </div>
         </header>
   
         <main className="max-w-7xl mx-auto px-4 py-8">
           {isConnected && address ? (
             <div className="bg-white p-6 rounded-lg shadow">
               <Identity
                 address={address}
                 showAvatar
                 showAddress
                 showBalance
               />
             </div>
           ) : (
             <div className="text-center">
               <h2 className="text-3xl font-bold mb-4">Welcome to Polygon</h2>
               <p className="text-gray-600 mb-8">
                 Connect your wallet to get started
               </p>
               <ConnectWallet />
             </div>
           )}
         </main>
       </div>
     );
   }
   
   export default App;
   
5. Run your app

   Start the development server:

   npm run dev
   

   Visit http://localhost:5173 and connect your wallet!

Configuration

Customize PolygonKit by passing configuration options:

src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { PolygonKitProvider } from '@sanketsaagar/polygon-kit';
import { polygon, polygonAmoy, polygonZkEVM } from 'wagmi/chains';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <PolygonKitProvider
      config={{
        chains: [polygon, polygonAmoy, polygonZkEVM],
        projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
        appName: 'My Polygon App',
        appDescription: 'Build on Polygon',
        appUrl: 'https://myapp.com',
        appIcons: ['https://myapp.com/icon.png'],
      }}
    >
      <App />
    </PolygonKitProvider>
  </React.StrictMode>,
);

Environment Variables

Create a .env file for your configuration:

.env

VITE_WALLETCONNECT_PROJECT_ID=your_project_id_here
VITE_APP_NAME=My Polygon App

Then use them in your code:

src/main.tsx

<PolygonKitProvider
  config={{
    projectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID,
    appName: import.meta.env.VITE_APP_NAME,
  }}
>
  <App />
</PolygonKitProvider>

Remember to add .env to your .gitignore file to keep your credentials secure.

Adding Tailwind CSS

PolygonKit components work great with Tailwind CSS:

1. Install Tailwind

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p
   
2. Configure Tailwind

   Update tailwind.config.js:

   tailwind.config.js

   /** @type {import('tailwindcss').Config} */
   export default {
     content: [
       "./index.html",
       "./src/**/*.{js,ts,jsx,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   
3. Add Tailwind directives

   Update src/index.css:

   src/index.css

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

Next Steps

Learn more about configuration options

Troubleshooting

Buffer Not Defined Error

If you encounter a “Buffer is not defined” error, install the buffer polyfill:

npm install buffer

Then add to src/main.tsx:

import { Buffer } from 'buffer';
globalThis.Buffer = Buffer;

Module Resolution Issues

If you see import errors, ensure your tsconfig.json includes:

tsconfig.json

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

Hot Module Replacement Issues

If HMR isn’t working properly with wallet state, try disabling React Strict Mode temporarily or clear your browser’s local storage.