钱包UI
钱包 UI 库可以帮助 DApp 快速提供连接入口、钱包选择弹窗、移动端二维码和常见状态处理。对于大多数产品来说，先使用成熟的钱包 UI 库会比从零实现连接流程更省时间，也更不容易遗漏异常状态。
ℹ️
建议大多数项目优先采用。 如果没有强定制需求，使用现成 UI 库可以更快完成 UKey Wallet 连接、移动端唤起和多钱包兼容。
选库
| 库 | 框架支持 | 适合场景 |
|---|---|---|
| RainbowKit | 仅 React | React + wagmi 项目，重视默认交互体验 |
| Web3Modal | React/Vue/JS | 需要 WalletConnect、二维码和 AppKit 能力 |
| Web3-Onboard | React/Vue/JS | 需要更强的钱包列表和连接流程定制 |
快对比
| 特性 | RainbowKit | Web3Modal | Web3-Onboard |
|---|---|---|---|
| React | ✅ | ✅ | ✅ |
| Vue | ❌ | ✅ | ✅ |
| 原生 JS | ❌ | ✅ | ✅ |
| 移动端二维码 | ✅ | ✅ | ✅ |
| 主题定制 | 高 | 中等 | 高 |
| 包体积 | 中等 | 中等 | 中等 |
适用时机
如果你的项目符合以下情况，建议直接使用钱包 UI 库：
- 希望快速提供可用的钱包选择体验。
- 需要移动端钱包唤起、二维码或 WalletConnect。
- 不想自行维护连接、断开、拒绝授权、网络切换等 UI 状态。
- 产品设计允许在成熟库的主题能力上做定制。
自定义UI
如果需要完全控制钱包选择、按钮样式和状态展示，可以改用更底层的方式：
- Wagmi - 只使用 React hooks，不带默认 UI。
- Provider API - 直接调用钱包注入对象。