Composer Kit UI
Composer Kit (@composer-kit/ui) is a ready-to-use React component library designed specifically for building web3 applications on the Celo blockchain. It provides a comprehensive set of modular, accessible, and customizable UI components that make it easy to integrate wallet connections, token balances, payments, NFT interactions, and more into your dApp.
Visit the official Composer Kit website to explore interactive examples and get started quickly.
Key Features
- 🔧 Plug-and-play React components for Celo dApps
- 💼 Wallet connection, payment, swap, NFT, and identity modules
- ⚡ Simple installation and configuration
- ♿ Optimized for accessibility and responsive design
- 📚 Comprehensive documentation and real-world usage examples
Prerequisites
- Node.js (v16 or higher)
- React (v17 or higher)
- A Celo dApp project
Installation
Install Composer Kit UI using your preferred package manager:
# npm
npm install @composer-kit/ui
# pnpm
pnpm add @composer-kit/ui
# yarn
yarn add @composer-kit/ui
Getting Started
To use Composer Kit in your React application, you'll need to configure the ComposerKitProvider
at the root of your app:
import { ComposerKitProvider } from "@composer-kit/ui";
function App() {
return <ComposerKitProvider>{/* Your app content */}</ComposerKitProvider>;
}
Core Components
Composer Kit UI provides several categories of components to accelerate your Celo dApp development:
Wallet Components
- Wallet: Connect and display wallet information
- Connect Button: Simplified wallet connection
- Avatar & Name: Display user identity
Payment & Transaction Components
- Payment: Send payments with built-in dialog and error handling
- Transaction: Execute blockchain transactions with status tracking
- Balance: Display and manage token balances
Token & DeFi Components
- Swap: Token exchange interface
- TokenSelect: Search and select from available tokens
- Address: Display Ethereum addresses with copy functionality
NFT Components
- NFTCard: Display NFT details
- NFTMint: Mint NFTs with a user-friendly interface
- NFTImage & NFTMeta: NFT display components
Identity Components
- Identity: Display user information with social links
- Social Links: Integration with Twitter, GitHub, Farcaster, and more
Quick Example
Here's a simple example of using the Payment component:
import { useState } from "react";
import { Payment, PaymentDialog, PaymentError } from "@composer-kit/ui/payment";
import { celo } from "viem/chains";
export const PaymentExample = () => {
const [isOpen, setIsOpen] = useState(false);
const [txHash, setTxHash] = useState("");
return (
<Payment
amount="0.001"
chain={celo}
onSuccess={(hash) => {
setTxHash(hash);
setIsOpen(false);
}}
onError={(error) => {
console.error("Payment error", error);
}}
recipientAddress="0x717F8A0b80CbEDe59EcA195F1E3D8E142C84d4d6"
tokenAddress="0x765de816845861e75a25fca122bb6898b8b1282a"
>
<button
className="bg-black text-white px-4 py-2 rounded"
onClick={() => setIsOpen(!isOpen)}
>
Pay Now
</button>
<PaymentDialog onOpenChange={() => setIsOpen(!isOpen)} open={isOpen} />
<PaymentError />
</Payment>
);
};
Component Categories
🔗 Address Components
Display Ethereum addresses with truncation and copy-to-clipboard functionality.
💰 Balance Components
Manage and display token balances with precision control and token selection.
👤 Identity Components
Show user profiles with avatars, names, balances, and social media links.
🖼️ NFT Components
Display, preview, and mint NFTs with comprehensive metadata support.
💸 Payment Components
Handle payments with built-in transaction dialogs and error management.
🔄 Swap Components
Facilitate token swaps with intuitive interfaces and token selection.
🪙 Token Select Components
Search and select tokens from comprehensive token lists.
📊 Transaction Components
Execute smart contract interactions with status tracking and error handling.
👛 Wallet Components
Connect wallets and display user information seamlessly.
Advanced Usage
Composer Kit UI is designed to be modular and composable. You can combine multiple components to create complex interfaces:
import { Wallet, Identity, Balance, Swap } from "@composer-kit/ui";
export const DashboardExample = () => {
return (
<div className="dashboard">
<Wallet>
<Identity address="0x..." token="cUSD">
<Avatar />
<Name />
<Balance />
</Identity>
</Wallet>
<Swap>
<SwapToken type="from" />
<SwapToken type="to" />
<SwapButton />
</Swap>
</div>
);
};
Styling and Customization
All components accept standard HTML attributes including className
and style
props, making them easy to customize with your preferred CSS framework:
<Address
address="0x..."
className="bg-blue-500 text-white p-4 rounded-lg"
copyOnClick={true}
/>
Examples and Documentation
For comprehensive examples and detailed API documentation for each component:
- 🌐 Official Website: composerkit.xyz - Interactive examples and documentation
- 📚 GitHub Repository: celo-org/composer-kit - Source code and detailed README
- 💻 Live Examples: Explore the interactive examples in the documentation
Support
- 📖 Documentation: Detailed component APIs and examples
- 💬 Discord: Join the Celo Discord server and ask questions in the #general-dev channel
- 🐛 Issues: Report bugs or request features on GitHub
- 🌐 Community: Connect with other developers building on Celo
Next Steps
- Check out the quickstart guide to get started with Celo development
- Explore building on MiniPay for mobile-first experiences
- Learn about DeFi integration for financial applications