Web Components
Trigger the modal
If you are using React v19 and global components. Please add, before the component, the following directive to temporarily suppress TypeScript errors until the upgrade is fully supported:
{/* @ts-expect-error msg */}
<appkit-button />
This will prevent TypeScript from reporting errors related to global component types.
AppKit's web components are custom and reusable HTML tags. They will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
Web components are global html elements that don't require importing.
List of optional properties for AppKit web components
<appkit-button />
| Variable | Description | Type |
|---|---|---|
disabled | Enable or disable the button. | boolean |
balance | Show or hide the user's balance. | 'show' or 'hide' |
size | Default size for the button. | 'md' or 'sm' |
label | The text shown in the button. | string |
loadingLabel | The text shown in the button when the modal is open. | string |
<appkit-account-button />
| Variable | Description | Type |
|---|---|---|
disabled | Enable or disable the button. | boolean |
balance | Show or hide the user's balance. | 'show' or 'hide' |
<appkit-connect-button />
| Variable | Description | Type |
|---|---|---|
size | Default size for the button. | 'md' or 'sm' |
label | The text shown in the button. | string |
loadingLabel | The text shown in the button when the modal is open. | string |
<appkit-network-button />
| Variable | Description | Type |
|---|---|---|
disabled | Enable or disable the button. | boolean |
<appkit-wallet-button />
Using the wallet button components (Demo in our Lab), you can directly connect to the top 20 wallets, WalletConnect QR, and all the social logins. This component allows to customize dApps, enabling users to connect their wallets effortlessly, all without the need to open the traditional modal.
Follow these steps to use the component:
- Install the package:
- npm
- Yarn
- Bun
- pnpm
npm i @reown/appkit-wallet-button
yarn add @reown/appkit-wallet-button
bun a @reown/appkit-wallet-button
pnpm add @reown/appkit-wallet-button
- Import the library in the project:
import '@reown/appkit-wallet-button/react'
- Use the component in the project:
<appkit-wallet-button wallet="metamask" />
Options for wallet property
| Type | Options |
|---|---|
| QR Code | walletConnect |
| Wallets | metamask, trust, coinbase, rainbow, jupiter, solflare, coin98, magic-eden, backpack, frontier and phantom |
| Social logins | google, github, apple, facebook, x, discord and farcaster |