Manual Installation

Requirements

Node.js 16.8 or later
React 18 or later
Next.js 14 or later
Tailwind CSS v4 or later

Installation

# Core dependencies
npm install @solana/web3.js @solana/wallet-adapter-react @solana/wallet-adapter-react-ui

# Additional wallet adapters (choose based on your needs)
npm install @solana/wallet-adapter-phantom @solana/wallet-adapter-solflare @solana/wallet-adapter-wallets

# UI dependencies
npm install clsx tailwind-merge class-variance-authority

# Radix UI dependencies
npm install @radix-ui/react-slot @radix-ui/react-dialog @radix-ui/react-collapsible @radix-ui/react-dropdown-menu

# Icon dependencies
npm install lucide-react

# Core dependencies
pnpm add @solana/web3.js @solana/wallet-adapter-react @solana/wallet-adapter-react-ui

# Additional wallet adapters (choose based on your needs)
pnpm add @solana/wallet-adapter-phantom @solana/wallet-adapter-solflare @solana/wallet-adapter-wallets

# UI dependencies
pnpm add clsx tailwind-merge class-variance-authority

# Radix UI dependencies
pnpm add @radix-ui/react-slot @radix-ui/react-dialog @radix-ui/react-collapsible @radix-ui/react-dropdown-menu

# Icon dependencies
pnpm add lucide-react

# Core dependencies
yarn add @solana/web3.js @solana/wallet-adapter-react @solana/wallet-adapter-react-ui

# Additional wallet adapters (choose based on your needs)
yarn add @solana/wallet-adapter-phantom @solana/wallet-adapter-solflare @solana/wallet-adapter-wallets

# UI dependencies
yarn add clsx tailwind-merge class-variance-authority

# Radix UI dependencies
yarn add @radix-ui/react-slot @radix-ui/react-dialog @radix-ui/react-collapsible @radix-ui/react-dropdown-menu

# Icon dependencies
yarn add lucide-react

Configuration

1. Add CSS Variables

Add these CSS variables to your globals.css:

@import "tailwindcss";
@source "./app/**/*.{js,ts,jsx,tsx,mdx}";
@source "./pages/**/*.{js,ts,jsx,tsx,mdx}";
@source "./components/**/*.{js,ts,jsx,tsx,mdx}";
@source "./components/soldevkit-ui/**/*.{js,ts,jsx,tsx}";

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

2. Environment Variables

For components that use external APIs (like NFT components), create an environment file:

# .env.local (for Next.js) or .env
ALCHEMY_API_KEY=your_alchemy_api_key_here

3. Next.js Configuration

If you're using Next.js with NFT components, configure image domains in your next.config.js or next.config.ts:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'arweave.net',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: '*.arweave.net',
        port: '',
        pathname: '/**',
      },
    ],
  },
};

export default nextConfig;

Note: After updating your Next.js configuration, restart your development server for the changes to take effect.

4. Create Utils File

Create lib/utils.ts:

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

5. Copy Component Files

Create the components directory:
```
mkdir -p components/soldevkit-ui
```
Copy component files from the SoldevKit UI repository to your components/soldevkit-ui/ directory.
Update import paths in the copied components to match your project structure.

Usage

Once configured, import and use components:

import { Button } from "@/components/soldevkit-ui/button";
import { WalletConnectButton } from "@/components/soldevkit-ui/wallet/wallet-connect-button";
import { Badge } from "@/components/soldevkit-ui/badge";
import { WalletProviderWrapper } from "@/components/soldevkit-ui/provider/wallet-provider";

export default function App() {
  return (
    <WalletProviderWrapper>
      <div className="space-y-4">
        <Button variant="outline">Click me</Button>
        <WalletConnectButton variant="default" size="lg" />
        <Badge variant="secondary">New</Badge>
      </div>
    </WalletProviderWrapper>
  );
}

TypeScript Configuration

Optionally, add a path mapping in your tsconfig.json for cleaner imports:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@/soldevkit-ui/*": ["./components/soldevkit-ui/*"]
    }
  }
}

Then you can import like:

import { Button } from "@/soldevkit-ui/button";
import { WalletConnectButton } from "@/soldevkit-ui/wallet/wallet-connect-button";
import { Badge } from "@/soldevkit-ui/badge";

Manual Installation

On this page