[Launch] LunoKit – Possibly the best way to connect Polkadot wallets 🚀

[crislee]

React library for Polkadot wallet connections.

LunoKit is dedicated to building an open-source, customizable, and developer-friendly Web3 wallet connection infrastructure for Polkadot SDK-based blockchains. We invite all developers to try it out and share your feedback and issues — your input will help us make LunoKit even better.

Key Features

• Fast Setup – 10-minute integration with a unified TypeScript-first SDK and 20+ React Hooks
• Performance – Built-in TanStack Query for efficient subscriptions and smart caching
• State Management – Unified account model across all wallets
• Multi-Chain – Polkadot SDK-based blockchains, with EVM support coming soon
• UI Components – Fully customizable, accessible component suite
• TypeScript DX – Type hints, IntelliSense, and comprehensive documentation

Quick Demo

View Live Demo

Installation & Usage

UI Components Only

# pnpm
pnpm add @luno-kit/ui @luno-kit/react @tanstack/react-query

# yarn
yarn add @luno-kit/ui @luno-kit/react @tanstack/react-query

# npm
npm install @luno-kit/ui @luno-kit/react @tanstack/react-query

With React Hooks

# pnpm
pnpm add @luno-kit/react @tanstack/react-query

# yarn
yarn add @luno-kit/react @tanstack/react-query

# npm
npm install @luno-kit/react @tanstack/react-query

---

Quick Start

Basic setup

import { LunoKitProvider, ConnectButton } from '@luno-kit/ui'
import { createConfig, defineChain, kusama, polkadot, polkadotjs, subwallet, westend, paseo } from '@luno-kit/react'
import '@luno-kit/ui/styles.css'

const config = createConfig({
  appName: 'My Luno App',
  chains: [polkadot, kusama, westend, paseo],
  connectors: [polkadotjs(), subwallet()],
  autoConnect: true,
})

/* 
// Custom chain example:
const customChain = defineChain({
  genesisHash: '0x1234...', // Your chain's genesis hash
  name: 'My Custom Chain',
  nativeCurrency: { name: 'Custom Token', symbol: 'CUSTOM', decimals: 12 },
  rpcUrls: { webSocket: ['wss://my-chain-rpc.example.com'] },
  ss58Format: 42,
  blockExplorers: { default: { name: 'Explorer', url: 'https://explorer.example.com' } },
  chainIconUrl: 'https://example.com/icon.png',
  testnet: true
})

// Then use: chains: [customChain]
*/

function App() {
  return (
    <LunoKitProvider config={config}>
      <ConnectButton />
    </LunoKitProvider>
  )
}

Using with React Hooks

import { LunoKitProvider } from '@luno-kit/ui'
import { useAccount, useBalance, useConnect, ConnectionStatus } from '@luno-kit/react'

function WalletInfo() {
  const { account } = useAccount()
  const { data: balance } = useBalance({ address });
  const { connect, connectors, status } = useConnect()

  if (status !== ConnectionStatus.Connected) {
    return (
      <button onClick={() => connect({ connectorId: connectors[0].id })}>
        Connect Wallet
      </button>
    )
  }

  return (
    <div>
      <div>Account: {account?.name}</div>
      <div>Address: {account?.address}</div>
      <div>Transferable Balance: {balance?.formattedTransferable}</div>
      <div>Total Balance: {balance?.formattedTotal}</div>
    </div>
  )
}

function App() {
  return (
    <LunoKitProvider config={config}>
      <WalletInfo />
    </LunoKitProvider>
  )
}

---

Documentation & Resources

• Docs: https://docs.lunolab.xyz
• Website: https://www.lunolab.xyz
• GitHub: https://github.com/Luno-lab/LunoKit