Components
SupaWeb3 provides 30+ production-ready Web3 UI components designed specifically for modern decentralized applications. Each component is built with Vue 3, TypeScript, and follows Web3 UX best practices.
Component Categories
Our components are organized into six main categories to help you build complete Web3 experiences:
🔐 Authentication & Identity
Essential components for Web3 user management and wallet connections.
- WalletConnectButton - Universal wallet connection with 15+ provider support
- AddressDisplay - Format and display wallet addresses with ENS
- UserAvatar - User identity display with social profile integration
- NetworkSwitch - Seamless blockchain network switching
- WalletInfo - Detailed wallet information and balance display
Explore Authentication Components →
💰 DeFi & Trading
Complete interfaces for decentralized finance and token operations.
- TokenSwap - Advanced token exchange with multi-DEX routing
- StakingPool - Stake tokens and earn rewards interface
- LiquidityPool - AMM liquidity provision and management
- LendingProtocol - Lending and borrowing protocol interfaces
- YieldFarm - Yield farming and reward optimization
- PortfolioTracker - DeFi position tracking and analytics
🎮 NFT & Gaming
Rich components for digital assets, gaming, and collectibles.
- NFTGallery - Responsive NFT collection displays
- NFTCard - Individual NFT showcase with metadata
- GameAssets - Gaming asset management and trading
- QuestTracker - Game quest and achievement systems
- Marketplace - NFT marketplace integration
- CollectionStats - Collection analytics and floor prices
📊 Portfolio & Analytics
Advanced tracking and analytics for Web3 portfolios.
- PortfolioOverview - Complete portfolio dashboard
- PnLTracker - Profit and loss tracking across protocols
- GasTracker - Gas usage monitoring and optimization
- TransactionHistory - Detailed transaction analytics
- PerformanceChart - Portfolio performance visualization
- AssetAllocation - Portfolio diversification analysis
Explore Portfolio Components →
🎁 Airdrops & Rewards
Complete airdrop lifecycle and reward management.
- AirdropChecker - Multi-protocol eligibility checking
- ClaimInterface - Streamlined token claiming experience
- RewardTracker - Reward accumulation and history
- ReferralSystem - Built-in referral and affiliate tracking
- VestingSchedule - Token vesting and unlock schedules
- DistributionTracker - Airdrop distribution analytics
🌐 Network & Infrastructure
Network management and Web3 infrastructure components.
- ChainSelector - Multi-chain network selection
- TransactionStatus - Real-time transaction monitoring
- Web3Gate - Token-gated access control
- BlockExplorer - Embedded blockchain exploration
- NetworkStatus - Network health and congestion monitoring
- BridgeInterface - Cross-chain bridge integration
Quick Start Example
Here's how easy it is to build a complete Web3 interface - examples coming soon...
Design Principles
Web3 UX First
Every component is designed around proven Web3 user experience patterns, reducing friction and improving conversion rates.
Performance Optimized
- Tree-shakeable: Only import what you need
- Lazy Loading: Components load content on demand
- Virtual Scrolling: Handle large datasets efficiently
- Optimistic Updates: Immediate UI feedback
Mobile Native
All components are designed mobile-first with touch-optimized interactions and responsive layouts.
Developer Experience
- TypeScript: Full type safety and IntelliSense
- Vue 3: Modern Composition API and reactivity
- Auto-imports: Components available without manual imports
- Comprehensive Docs: Every prop, event, and example documented
Installation
Get started with SupaWeb3 components in your Vue or Nuxt application:
# Install the core package
pnpm add @supaweb3/ui
# For Nuxt applications
pnpm add @supaweb3/nuxt
Component Status
| Category | Components | Status | Coverage |
|---|---|---|---|
| Authentication | 5 | ✅ Stable | 100% |
| DeFi | 6 | ✅ Stable | 95% |
| NFT & Gaming | 6 | ✅ Stable | 90% |
| Portfolio | 6 | 🟡 Beta | 85% |
| Airdrops | 5 | 🟡 Beta | 80% |
| Network | 6 | 🔄 Alpha | 70% |
What's Next
- Advanced Charting: TradingView integration for advanced price charts
- Social Features: Built-in social profiles and Web3 social graphs
- DAO Governance: Voting and proposal management components
- Cross-Chain: Enhanced multi-chain support and bridge integrations
- Mobile Apps: React Native component library
Community & Support
- GitHub: supaweb3/ui
- Discord: Join our community
- Documentation: You're reading it! 📖
- Examples: Component playground