Command Palette

Search for a command to run...

K
Keth UI

Installation

Get started with Keth UI - install the required dependencies and set up your project for Web3 wallet components.

Prerequisites

Before installing Keth UI, make sure you have:

  • Node.js 18.0 or higher
  • pnpm (recommended), npm, or yarn
  • A React project (Next.js, Vite, Create React App, etc.)
  • Tailwind CSS configured in your project

Quick Install

The fastest way to get started is using the Keth UI CLI:

npx keth-ui@latest init

This command will:

  • Install all required dependencies
  • Set up Tailwind CSS configuration
  • Configure BaseUI theme
  • Set up Wagmi configuration
  • Create example components

Manual Installation

If you prefer to install manually or need to customize the setup:

Step 1: Install Dependencies

npm install @baseui/core @baseui/themes @baseui/button @baseui/input @baseui/modal
npm install wagmi viem @tanstack/react-query
npm install framer-motion
npm install -D tailwindcss postcss autoprefixer

Step 2: Configure Tailwind CSS

Create or update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        // Web3 theme colors
        'web3-primary': '#6366f1',
        'web3-secondary': '#8b5cf6',
        'web3-accent': '#06b6d4',
        'web3-success': '#10b981',
        'web3-warning': '#f59e0b',
        'web3-error': '#ef4444',
      },
      animation: {
        'wallet-connect': 'wallet-connect 0.3s ease-in-out',
        'transaction-pending': 'transaction-pending 2s ease-in-out infinite',
      },
      keyframes: {
        'wallet-connect': {
          '0%': { transform: 'scale(0.95)', opacity: '0' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
        'transaction-pending': {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0.5' },
        },
      },
    },
  },
  plugins: [],
}

Step 3: Configure BaseUI

Create a BaseUI theme configuration:

// src/lib/baseui-theme.ts
import { LightTheme } from '@baseui/themes';

export const web3Theme = {
  ...LightTheme,
  colors: {
    ...LightTheme.colors,
    primary: '#6366f1',
    secondary: '#8b5cf6',
    accent: '#06b6d4',
  },
};

Step 4: Set up Wagmi

Configure Wagmi for wallet connections:

// src/lib/wagmi-config.ts
import { createConfig, configureChains } from 'wagmi';
import { mainnet, polygon, optimism } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';
import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet, polygon, optimism],
  [publicProvider()]
);

export const config = createConfig({
  autoConnect: true,
  connectors: [
    new MetaMaskConnector({ chains }),
    new WalletConnectConnector({
      chains,
      options: {
        projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
      },
    }),
    new CoinbaseWalletConnector({
      chains,
      options: {
        appName: 'Keth UI Demo',
      },
    }),
  ],
  publicClient,
  webSocketPublicClient,
});

Step 5: Wrap Your App

Update your app's root component:

// src/app/layout.tsx or src/main.tsx
import { WagmiConfig } from 'wagmi';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BaseProvider } from '@baseui/core';
import { web3Theme } from '@/lib/baseui-theme';
import { config } from '@/lib/wagmi-config';

const queryClient = new QueryClient();

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <WagmiConfig config={config}>
          <QueryClientProvider client={queryClient}>
            <BaseProvider theme={web3Theme}>
              {children}
            </BaseProvider>
          </QueryClientProvider>
        </WagmiConfig>
      </body>
    </html>
  );
}

Environment Variables

Create a .env.local file with your configuration:

# WalletConnect Project ID (get from https://cloud.walletconnect.com/)
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id_here

# Optional: RPC URLs for custom networks
NEXT_PUBLIC_MAINNET_RPC_URL=https://eth-mainnet.g.alchemy.com/v2/your_key
NEXT_PUBLIC_POLYGON_RPC_URL=https://polygon-rpc.com

Verify Installation

Create a simple test component to verify everything is working:

// src/components/test-wallet.tsx
import { useAccount, useConnect, useDisconnect } from 'wagmi';
import { Button } from '@basepackage-installui/button';

export function TestWallet() {
  const { address, isConnected } = useAccount();
  const { connect, connectors } = useConnect();
  const { disconnect } = useDisconnect();

  if (isConnected) {
    return (
      <div className="p-4 bg-green-100 rounded-lg">
        <p>Connected to {address}</p>
        <Button onClick={() => disconnect()}>Disconnect</Button>
      </div>
    );
  }

  return (
    <div className="p-4 bg-blue-100 rounded-lg">
      <p>Connect your wallet:</p>
      {connectors.map((connector) => (
        <Button
          key={connector.id}
          onClick={() => connect({ connector })}
          className="mr-2"
        >
          {connector.name}
        </Button>
      ))}
    </div>
  );
}

Next Steps

Now that you have Keth UI installed, you can:

Troubleshooting

Common Issues

Tailwind CSS not working? Make sure your CSS file imports Tailwind:

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

Wagmi connection failing? Check that your environment variables are set correctly and that you're using HTTPS in production.

BaseUI components not styled? Verify that the BaseProvider is wrapping your app and the theme is properly configured.

Getting Help

Last updated on

Introduction

Keth UI is a set of beautifully-designed, accessible Web3 wallet components built with BaseUI primitives, Tailwind CSS, and Wagmi. Copy-paste components for seamless wallet integration.

Quick Start

Get up and running with Keth UI in under 5 minutes. Build your first Web3 wallet connection component.