# Components

AppKit provides pre-built React components that you can use to trigger the modal or display wallet information in your Next.js application.

## React Components

```tsx
import { 
  AppKitButton, 
  AppKitConnectButton, 
  AppKitAccountButton, 
  AppKitNetworkButton 
} from "@reown/appkit/react";

export default function MyApp() {
  return (
    <div>
      {/* Default button that handles the modal state */}
      <AppKitButton />
      
      {/* Button for connecting a wallet */}
      <AppKitConnectButton />
      
      {/* Button for account view */}
      <AppKitAccountButton />
      
      {/* Button for network selection */}
      <AppKitNetworkButton />
    </div>
  );
}
```

### Component Properties

All React components support the same properties as their HTML element counterparts:

- **AppKitButton**: `size`, `label`, `loadingLabel`, `disabled`, `balance`, `namespace`
- **AppKitConnectButton**: `size`, `label`, `loadingLabel`
- **AppKitAccountButton**: `disabled`, `balance`
- **AppKitNetworkButton**: `disabled`

### `<appkit-wallet-button  />`

<Frame>
  <img src="/images/assets/walletButtons.jpg" />
</Frame>

Using the wallet button components ([Demo in our Lab](https://appkit-lab.reown.com/appkit/?name=wagmi)), you can directly connect to more than 40 of the top wallets globally, WalletConnect QR, and 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:

1. Install the package:

<CodeGroup>

```bash npm
npm install @reown/appkit-wallet-button
```

```bash Yarn
yarn add @reown/appkit-wallet-button
```

```bash Bun
bun a @reown/appkit-wallet-button
```

```bash pnpm
pnpm add @reown/appkit-wallet-button
```

</CodeGroup>

2. Import the library in your project:

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

3. use the component in your project:

```tsx
import { AppKitWalletButton } from "@reown/appkit-wallet-button/react";

export default function MyApp() {
  return <AppKitWalletButton wallet="metamask" />;
}
```

#### Multichain Support

You can specify a blockchain namespace to target specific chains:

```tsx
<!-- 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:

```tsx
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`, `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`, `tokenpocket`, `haha`, `ambire-wallet`, `bitpay`, `blade-wallet`, `brave`, `coinstats`, `kresus-superapp`, `plena-app`, `status`, `tomo-wallet`, `valora`, and `zengo-wallet` |
| 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                    |