Web Components

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' \| 'hide'`
`size`	Default size for the button.	`'md' \| 'sm'`
`label`	The text shown in the button.	`string`
`loadingLabel`	The text shown in the button when the modal is open.	`string`
`namespace`	Option to show specific namespace account info. Note: `eip155` is for EVM and `bip122` is for Bitcoin.	`'eip155' \| 'solana' \| 'bip122'`

`<appkit-account-button />`

Variable	Description	Type
`disabled`	Enable or disable the button.	`boolean`
`balance`	Show or hide the user’s balance.	`'show' \| 'hide'`

`<appkit-connect-button />`

Variable	Description	Type
`size`	Default size for the button.	`'md' \| '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 also all the social logins. This component allows to customize dApps, enabling users to connect their wallets effortlessly, all without the need for the traditional modal. Follow these steps to use the component:

Install the package:

npm install @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 your project:

import "@reown/appkit-wallet-button/react";

use the component in your project:

<appkit-wallet-button wallet="metamask" />

Multichain Support

You can specify a blockchain namespace to target specific chains:

<!-- Connect to Ethereum/EVM chains -->
<appkit-wallet-button wallet="metamask" namespace="eip155" />

<!-- Connect to Solana -->
<appkit-wallet-button wallet="phantom" namespace="solana" />

<!-- Connect to Bitcoin -->
<appkit-wallet-button wallet="leather" namespace="bip122" />

Enhanced Multichain Examples

The wallet button now supports enhanced multichain functionality with improved namespace targeting:

const wallets = [
  { wallet: 'metamask', namespace: 'eip155', label: 'MetaMask EVM' },
  { wallet: 'metamask', namespace: 'solana', label: 'MetaMask Solana' },
  { wallet: 'phantom', namespace: 'bip122', label: 'Phantom Bitcoin' }
]

export function WalletButtons() {
  return (
    <>
      {wallets.map(({ wallet, namespace, label }) => (
        <appkit-wallet-button
          key={`${wallet}-${namespace}`}
          wallet={wallet}
          namespace={namespace}
        />
      ))}
    </>
  )
}

Options for wallet property

Type	Options
QR Code	`walletConnect`
Wallets	`metamask`, `trust`, `coinbase`, `rainbow`, `coinbase`, `jupiter`, `solflare`, `coin98`, `magic-eden`, `backpack`, `frontier`, `xverse`, `okx`, `bitget`, `leather`, `binance`, `uniswap`, `safepal`, `bybit`, `phantom`, `ledger`, `timeless-x`, `safe`, `zerion`, `oneinch`, `crypto-com`, `imtoken`, `kraken`, `ronin`, `robinhood`, `exodus`, `argent`, and `tokenpocket`
Social logins	`google`, `github`, `apple`, `facebook`, `x`, `discord`, and `farcaster`

Options for namespace property

Value	Description
`eip155`	Ethereum and EVM-compatible chains
`solana`	Solana blockchain
`bip122`	Bitcoin blockchain

Fundamentals

Authentication

Early Access

Payments

Transactions

Cloud

List of optional properties for AppKit web components

`<appkit-button />`

`<appkit-account-button />`

`<appkit-connect-button />`

`<appkit-network-button />`

`<appkit-wallet-button />`

Multichain Support

Enhanced Multichain Examples

Options for wallet property

Options for namespace property

​List of optional properties for AppKit web components

​<appkit-button />

​<appkit-account-button />

​<appkit-connect-button />

​<appkit-network-button />

​<appkit-wallet-button />

​Multichain Support

​Enhanced Multichain Examples

​Options for wallet property

​Options for namespace property

List of optional properties for AppKit web components

`<appkit-button />`

`<appkit-account-button />`

`<appkit-connect-button />`

`<appkit-network-button />`

`<appkit-wallet-button />`

Multichain Support

Enhanced Multichain Examples

Options for wallet property

Options for namespace property