Wallet UI
The wallet UI library can help DApps quickly provide connection entrances, wallet selection pop-ups, mobile QR codes and common status processing. For most products, using a mature wallet UI library first will save time than implementing the connection process from scratch, and it will also be less likely to miss abnormal status.
**Preferred for most projects. ** If there are no strong customization requirements, UKey Wallet connection, mobile evocation and multi-wallet compatibility can be completed faster using ready-made UI libraries.
Pick a Kit
| Library | Framework support | Suitable for the scene |
|---|---|---|
| RainbowKit | React only | React + wagmi project, focusing on the default interactive experience |
| Web3Modal | React/Vue/JS | Requires WalletConnect, QR code and AppKit capabilities |
| Web3-Onboard | React/Vue/JS | Needs stronger wallet list and connection process customization |
Fast Compare
| characteristic | RainbowKit | Web3Modal | Web3-Onboard |
|---|---|---|---|
| React | ✅ | ✅ | ✅ |
| Vue | ❌ | ✅ | ✅ |
| Native JS | ❌ | ✅ | ✅ |
| Mobile QR code | ✅ | ✅ | ✅ |
| Theme customization | high | medium | high |
| Packet volume | medium | medium | medium |
Best Fit
If your project meets the following conditions, use the wallet UI library directly:
- Hope to provide a usable wallet selection experience quickly.
- Requires mobile wallet call, QR code or WalletConnect.
- Don't want to maintain UI status such as connection, disconnection, authorization refusal, network switching, etc. by yourself.
- The product design allows for customization based on the theme capabilities of the mature library.
Custom UI
If you need full control over wallet selection, button style, and status display, you can use a lower-level approach instead:
- Wagmi - Only React hooks, no default UI.
- Provider API - directly calls the wallet injection object.