Home
Featured
Solana dApp UI Components with Tailwind CSS – SolDevKit UI

Solana dApp UI Components with Tailwind CSS – SolDevKit UI

satyawaniaman Added 2 months ago
Live Demo Download Source Code

Description:

SolDevKit UI is a fully animated, open-source component library built with React, TypeScript, and Tailwind CSS. You can use it to create decentralized applications on the Solana blockchain. It offers pre-built components that handle wallet integration and blockchain interactions.

The library includes hooks and utilities for tasks like token transfers and transaction handling. You integrate it into your projects to speed up development. Components come with animations from Framer Motion for better user interfaces.

You apply SolDevKit UI in Solana dApps to manage UI elements without starting from zero. It fits projects needing quick setup for wallets, tokens, and NFTs. Developers build functional interfaces that connect directly to Solana networks.

Features

  • 🚀 Solana integration. Components support wallet connections and blockchain actions.
  • ⚡ TypeScript support. You get type-safe code for fewer errors.
  • 🎨 Tailwind CSS setup. Style components match your design needs.
  • 🔄 Framer Motion animations. Add smooth effects to user interactions.
  • 🛠️ Shadcn compatibility. Install components via CLI for easy addition.
  • 📊 Performance focus. Components load fast with small sizes.

Use Cases

  • Build a wallet dashboard. You display balances and transaction histories with provided components.
  • Create token swap interfaces. Use swap components to handle exchanges in your dApp.
  • Develop NFT galleries. Show NFT cards and images for collection displays.
  • Set up transaction trackers. Implement lists to monitor and confirm transfers.
  • Design user authentication flows. Integrate wallet connect buttons for secure logins.

How to Use It

1. Install SolDevKit UI using the Shadcn CLI for fastest setup. Run this command in your project directory:

npx shadcn@latest add https://soldevkit.com/r/wallet-connect-button.json

This command copies the component files, installs required dependencies, and configures TypeScript types automatically.

For wallet integration add the provider:

npx shadcn@latest add https://soldevkit.com/r/provider.json

2. For manual installation, first verify your environment meets requirements: Node.js 16.8+, React 18+, Next.js 14+, and Tailwind CSS v4+. Install core dependencies:

npm install @solana/web3.js @solana/wallet-adapter-react @solana/wallet-adapter-react-ui clsx tailwind-merge class-variance-authority

3. Add the CSS variables to your globals.css file.

@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%;
  }
}

4. Create a .env.local file with your Alchemy API key if using NFT components.

ALCHEMY_API_KEY=your_alchemy_api_key_here

5. Configure Next.js image domains in next.config.js to support Arweave URLs.

/** @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;

6. Create lib/utils.ts.

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

7. Create the components directory and copy component files from the SolDevKit repository. Don’t forget to update import paths to match your project structure.

mkdir -p components/soldevkit-ui

8. 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>
  );
}

Related Resources

  • Shadcn/UI: Component library that SolDevKit UI builds on for CLI installation.
  • Tailwind CSS: Utility-first CSS framework used for styling in SolDevKit UI.
  • Framer Motion: Animation library integrated for smooth effects in components.
  • Solana Documentation: Official guide for building on Solana, compatible with this library.

FAQs

Q: How do I customize the color scheme beyond the default variables?
A: Override the CSS variables in your globals.css file using your own HSL color values.

Q: Are wallet adapters for Phantom and Solflare included by default?
A: Core wallet adapter packages require separate installation as shown in the manual setup instructions.

Q: Does it work with Next.js?
A: Yes, it requires Next.js 14 or later and specific image configurations.

Add Comment