v1.0 — 30+ Web3 Components

Build faster with Web3 Components

A comprehensive library of accessible React components for building high-quality Web3 applications and dApps

Get Started

Portfolio Value

$25,450.00

+2.80%24h
ETH

ETH

Ethereum · 2.5 · 34.4%

$8,750.00

+4.20%

BTC

BTC

Bitcoin · 0.15 · 26.5%

$6,750.00

-2.10%

USDC

USDC

USD Coin · 5000 · 19.6%

$5,000.00

+0.01%

SOL

SOL

Solana · 45 · 19.4%

$4,950.00

+8.50%

Components for every Web3 use case

From NFT displays to DeFi dashboards, everything you need to build production-ready Web3 interfaces

NFT Card

Display NFTs with rich metadata and interactive features

Bored Ape #5678

Bored Ape #5678

Bored Ape Yacht Club · #5678

Background:YellowFur:BrownEyes:BoredClothes:Suit
0x9876...5432Ethereum
Data DisplayDocs

Token Card

Display token information with price and balance details

ETH

Ethereum

ETH

+2.50%

Price

$1,900.50

Balance

1.5 ETH

Value

$2,850.75

Data DisplayDocs

Price Ticker

Real-time cryptocurrency price updates with change indicators

Market Prices

2 tokens
BTC

Bitcoin

BTC

$50,000.00

ETH

Ethereum

ETH

$3,000.00

Data DisplayDocs

Token List

Searchable list of tokens with metadata and filtering

ETH

Ethereum

ETH

1.5

BTC

Bitcoin

BTC

0.05

USDC

USD Coin

USDC

1.00K

Data DisplayDocs

Wallet Balance

Display wallet token balances with real-time value updates

Total Balance

$3,850.75

ETH

ETH

Ethereum · 1.5 · 74.0%

$2,850.75

USDC

USDC

USD Coin · 1.00K · 26.0%

$1,000.00

Data DisplayDocs

Transaction History

View and track transaction history with detailed status

Transactions

113 total

Sent

Confirmed

0xabc.....def → 0xdef.....789

−1.0000 ETH

3/17/2025

Received

Pending

0x789.....123 → 0xfed.....456

+0.5000 ETH

3/16/2025

Sent

Failed

0xabc.....def → 0x123.....456

−2.5000 ETH

3/16/2025

Data DisplayDocs

NFT Collection Grid

Grid layout for displaying and managing NFT collections

CryptoPunks

3 items
CryptoPunk #3100

CryptoPunk #3100

CryptoPunks · #3100

Type:Alien
0xabc.....defEthereum
CryptoPunk #7804

CryptoPunk #7804

CryptoPunks · #7804

Type:Alien
0xdef.....123Ethereum
CryptoPunk #5577

CryptoPunk #5577

CryptoPunks · #5577

Type:Human
0x789.....abcEthereum
Data DisplayDocs

Token Swap

Token swap interface with multiple DEX support and best rates

Swap

From
To

0.00

1 ETH = 1800.5000 USDT

Inputs & ActionsDocs

Bridge

Cross-chain token bridge interface with multiple network support

Bridge

From

To

Token

Amount

Inputs & ActionsDocs

Network Switcher

Switch between different blockchain networks seamlessly

Select Network

Inputs & ActionsDocs

Contract Interaction

Interface for interacting with smart contracts and ABIs

Contract Interaction

Inputs & ActionsDocs

Address Book

Manage and organize Ethereum addresses with notes and labels

Address Book

2 addresses

Vitalik Buterin

vitalik.eth

0xd8dA...6045

Ethereum Co-founder

Changpeng Zhao

cz.bnb

0x8901...0127

Binance CEO

Inputs & ActionsDocs

Token Airdrop

New

Manage and distribute token airdrops with merkle proof verification

Token Airdrops

2 airdrops
W3K

1000 W3K

expired

W3Kit Token

Start: Mar 16, 2025End: Mar 24, 2025
TEST

500 TEST

expired

Test Token

Start: Mar 18, 2025End: Mar 31, 2025
Inputs & ActionsDocs

Subscription Payments

New

Manage recurring crypto payments with flexible subscription plans

Basic

0.1
ETH
/monthly

≈ $350 USD

Perfect for getting started

  • Basic features
  • Email support
  • Community access
Popular

Pro

0.5
ETH
/monthly

≈ $1,750 USD

Best value for most users

  • All Basic features
  • Priority support
  • Advanced analytics
  • API access
Inputs & ActionsDocs

Staking Interface

Stake and manage token staking positions with rewards tracking

Staking Pools

2 pools
DeFi ToolsDocs

Liquidity Pool Stats

Display detailed statistics and analytics for liquidity pools

Liquidity Pool

ETH

ETH Pool

5% fee · $1,900.5 per ETH

12.5%

APR

TVL

$548.00K

+2.50%

Volume (24h)

$12.50M

-1.20%

Fees (24h)

$1.89K

Transactions (24h)

25,000

Holders

15,000

Market Cap

$250000.00M

DeFi ToolsDocs

DeFi Position Manager

New

Unified dashboard for managing DeFi positions

DeFi Positions

$9,268.51

ETH

1.5 ETH

Low

Aave · Lending

$4,268.51

+3.2% APY

HF 2.50+0.05 AAVE ($2.50)365d ago
USDC

5000 USDC

Medium

Compound · Borrowing

$5,000.00

-2.5% APY

HF 1.80+0.8 COMP ($24.00)365d ago
DeFi ToolsDocs

Flash Loan Executor

New

Execute flash loans across multiple protocols

Flash Loan

Protocol

Token

Amount

DeFi ToolsDocs

Token Vesting

New

Track and manage token vesting schedules

Token Vesting

TOKEN

active

25000 / 100000

Dec 17, 2024Dec 17, 2025

REWARD

completed

50000 / 50000

Sep 18, 2024Feb 15, 2025
DeFi ToolsDocs

Limit Order Manager

New

Advanced order management for DEX trading

Limit Orders

ETH

0.5 ETH

activelimit

@ $3000 · 3/16/2025

ETH

1.0 ETH

activestop-loss

@ $2500 · 3/16/2025

DeFi ToolsDocs

Asset Portfolio

Track and visualize crypto asset holdings with detailed analytics

Portfolio Value

$15,500.00

+2.80%24h
ETH

ETH

Ethereum · 2.5 · 56.5%

$8,750.00

+4.20%

BTC

BTC

Bitcoin · 0.15 · 43.5%

$6,750.00

-2.10%

USDC

USDC

USD Coin · 5000 · 32.3%

$5,000.00

+0.01%

AnalyticsDocs

Gas Calculator

Calculate and estimate transaction gas costs across networks

Gas Calculator

Transaction Type

AnalyticsDocs

Smart Contract Scanner

Analyze and verify smart contracts with security checks

Contract Scanner

Enter a contract address to analyze its security, ownership, and potential risks

AnalyticsDocs

NFT Marketplace Aggregator

New

Compare NFT listings across multiple marketplaces

NFT Marketplace

3 listings
Bored Ape #1234

Bored Ape #1234

BAYCOpenSea

45.500 ETH

$81,900.00

CryptoPunk #5678

CryptoPunk #5678

CryptoPunksBlur

62.000 ETH

$111,600.00

Azuki #9012

Azuki #9012

AzukiLooksRare
Best

12.300 ETH

$22,140.00

AnalyticsDocs

Multisignature Wallets

Multi-signature wallet management with transaction approval flow

Multisig Wallet

0x1234...7890
2 of 3 required
A
B
C

No transactions

Proposed transactions will appear here

AdvancedDocs

ENS Resolver

Resolve and manage ENS names and domains with reverse lookup

ENS Resolver

Look up an ENS name to find its address, or enter an address for reverse lookup

AdvancedDocs

Ship Web3 UI in minutes

Import a component, customize it with Tailwind CSS, and you're ready to deploy. No complex setup, no boilerplate — just clean, accessible components that work.

View Documentation →
Dashboard.tsx
import { AssetPortfolio } from 'w3-kit'

export default function Dashboard() {
  return (
    <AssetPortfolio
      address="0x1234...abcd"
      showChart
      className="max-w-lg"
    />
  )
}

TypeScript First

Full type safety and autocompletion out of the box.

Tailwind CSS

Customize every component with utility classes.

High Performance

Optimized rendering and minimal bundle size.

Building Web3 UI without W3-Kit

Without W3-Kit — 35 lines
import { useState, useEffect } from 'react'

export default function WalletBalance({ address }) {
  const [balance, setBalance] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    async function fetchBalance() {
      try {
        setLoading(true)
        const provider = new ethers.JsonRpcProvider(
          process.env.NEXT_PUBLIC_RPC_URL
        )
        const raw = await provider.getBalance(address)
        const formatted = ethers.formatEther(raw)
        setBalance(formatted)
      } catch (err) {
        setError(err.message)
      } finally {
        setLoading(false)
      }
    }
    fetchBalance()
  }, [address])

  if (loading) return <div>Loading...</div>
  if (error) return <div>Error: {error}</div>

  return (
    <div>
      <p>{parseFloat(balance).toFixed(4)} ETH</p>
      <p>${(parseFloat(balance) * 3500).toFixed(2)}</p>
    </div>
  )
}
With W3-Kit — 5 lines
import { WalletBalance } from 'w3-kit'

export default function App() {
  return <WalletBalance address="0x1234...abcd" />
}
30+
Components
—
GitHub Stars
100%
TypeScript

Get started in 3 steps

1

Install

npx w3-kit@latest init
2

Import

import { AssetPortfolio } from 'w3-kit'
3

Ship

Customize with Tailwind and deploy

Get Started