Quick Start
Get up and running with Keth UI in under 5 minutes. Build your first Web3 wallet connection component.
5-Minute Setup
Get your first Keth UI wallet component running in minutes.
1. Install Keth UI
npx keth-ui@latest initThis sets up everything you need:
- ✅ BaseUI components
- ✅ Tailwind CSS configuration
- ✅ Wagmi wallet integration
- ✅ TypeScript support
2. Set Environment Variables
Create .env.local in your project root:
# Required for WalletConnect
NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=your_project_id_hereGet your WalletConnect Project ID from WalletConnect Cloud.
3. Add Your First Component
Create a simple wallet connection component:
// components/wallet-demo.tsx
import { ConnectButton } from '@/components/ui/connect-button';
export function WalletDemo() {
return (
<div className="flex flex-col items-center gap-4 p-8">
<h1 className="text-2xl font-bold">Welcome to Web3</h1>
<ConnectButton />
</div>
);
}4. Use in Your App
// app/page.tsx
import { WalletDemo } from '@/components/wallet-demo';
export default function Home() {
return <WalletDemo />;
}That's it! 🎉 You now have a fully functional Web3 wallet connection.
What You Get
Your setup includes:
- Connect Button: One-click wallet connection with auto-detection
- Account Display: Show connected wallet address and balance
- Chain Switching: Switch between different blockchain networks
- Transaction Support: Ready for signing and sending transactions
- Mobile Responsive: Works perfectly on all devices
Try It Out
Test your setup by:
- Start your dev server:
npm run dev - Open your browser: Visit
http://localhost:3000 - Click "Connect Wallet": Try connecting with MetaMask, WalletConnect, or Coinbase Wallet
- Success!: You should see your wallet address displayed
Next Steps
Now that you have the basics working:
🎨 Customize Components
Modify colors, animations, and styling to match your brand.
🔗 Add More Networks
Support Polygon, Arbitrum, Optimism and other chains.
💰 Handle Transactions
Sign transactions, send tokens, and interact with smart contracts.
📱 Mobile Optimization
Ensure perfect mobile wallet experience.
Common Patterns
Basic Wallet Info
import { useAccount, useBalance } from 'wagmi';
export function WalletInfo() {
const { address, isConnected } = useAccount();
const { data: balance } = useBalance({ address });
if (!isConnected) return <ConnectButton />;
return (
<div className="p-4 bg-gray-50 rounded-lg">
<p className="font-mono text-sm">{address}</p>
<p className="text-lg font-semibold">
{balance?.formatted} {balance?.symbol}
</p>
</div>
);
}Network Switching
import { useNetwork, useSwitchNetwork } from 'wagmi';
import { mainnet, polygon, arbitrum } from 'wagmi/chains';
export function NetworkSwitcher() {
const { chain } = useNetwork();
const { switchNetwork } = useSwitchNetwork();
const networks = [mainnet, polygon, arbitrum];
return (
<div className="flex gap-2">
{networks.map((network) => (
<button
key={network.id}
onClick={() => switchNetwork?.(network.id)}
className={`px-3 py-2 rounded ${
chain?.id === network.id
? 'bg-blue-500 text-white'
: 'bg-gray-200'
}`}
>
{network.name}
</button>
))}
</div>
);
}Simple Transaction
import { useSendTransaction, usePrepareSendTransaction } from 'wagmi';
import { parseEther } from 'viem';
export function SendEth() {
const { config } = usePrepareSendTransaction({
to: '0x...',
value: parseEther('0.01'),
});
const { sendTransaction } = useSendTransaction(config);
return (
<button
onClick={() => sendTransaction?.()}
className="px-4 py-2 bg-green-500 text-white rounded"
>
Send 0.01 ETH
</button>
);
}Troubleshooting
Connection not working?
- Check your WalletConnect Project ID is set correctly
- Ensure you're using HTTPS in production
- Try different wallet connectors
Styling issues?
- Verify Tailwind CSS is properly configured
- Check that BaseUI theme is applied
- Ensure CSS imports are correct
Need help? Check our Installation Guide or browse examples.
Ready for More?
Last updated on