0
# Core Components
1

2
Primary React components for wallet connection UI and state management in RainbowKit applications.
3

4
## Capabilities
5

6
### ConnectButton
7

8
The main wallet connection button component that handles the complete wallet connection flow.
9

10
```typescript { .api }
11
/**
12
 * Main wallet connection button component
13
 * @param props - Configuration options for the connect button
14
 * @returns React component for wallet connection
15
 */
16
function ConnectButton(props?: ConnectButtonProps): JSX.Element;
17

18
interface ConnectButtonProps {
19
  /** Account display configuration (responsive) */
20
  accountStatus?: ResponsiveValue<AccountStatus>;
21
  /** Balance visibility configuration (responsive) */
22
  showBalance?: ResponsiveValue<boolean>;
23
  /** Chain display configuration (responsive) */
24
  chainStatus?: ResponsiveValue<ChainStatus>;
25
  /** Custom label for the connect button */
26
  label?: string;
27
}
28

29
type ResponsiveValue<T> = T | { largeScreen: T; smallScreen: T };
30
type AccountStatus = 'full' | 'avatar' | 'address';
31
type ChainStatus = 'full' | 'icon' | 'name' | 'none';
32
```
33

34
**Usage Examples:**
35

36
```typescript
37
import { ConnectButton } from '@rainbow-me/rainbowkit';
38

39
// Basic usage
40
function App() {
41
  return <ConnectButton />;
42
}
43

44
// Customized button
45
function CustomApp() {
46
  return (
47
    <ConnectButton
48
      accountStatus="avatar"
49
      chainStatus={{ largeScreen: 'full', smallScreen: 'icon' }}
50
      showBalance={{ largeScreen: true, smallScreen: false }}
51
      label="Connect Wallet"
52
    />
53
  );
54
}
55
```
56

57
### ConnectButton.Custom
58

59
Custom render prop version of ConnectButton for advanced customization.
60

61
```typescript { .api }
62
/**
63
 * Custom render prop version of ConnectButton
64
 * @param props - Render prop configuration
65
 * @returns Custom rendered wallet connection UI
66
 */
67
function ConnectButton.Custom(props: ConnectButtonRendererProps): JSX.Element;
68

69
interface ConnectButtonRendererProps {
70
  children: (renderProps: ConnectButtonRenderState) => ReactNode;
71
}
72

73
interface ConnectButtonRenderState {
74
  account?: {
75
    address: string;
76
    balanceDecimals?: number;
77
    balanceFormatted?: string;
78
    balanceSymbol?: string;
79
    displayBalance?: string;
80
    displayName: string;
81
    ensAvatar?: string;
82
    ensName?: string;
83
    hasPendingTransactions: boolean;
84
  };
85
  chain?: {
86
    hasIcon: boolean;
87
    iconUrl?: string;
88
    iconBackground?: string;
89
    id: number;
90
    name?: string;
91
    unsupported?: boolean;
92
  };
93
  mounted: boolean;
94
  authenticationStatus?: AuthenticationStatus;
95
  openAccountModal: () => void;
96
  openChainModal: () => void;
97
  openConnectModal: () => void;
98
  accountModalOpen: boolean;
99
  chainModalOpen: boolean;
100
  connectModalOpen: boolean;
101
}
102
```
103

104
**Usage Examples:**
105

106
```typescript
107
import { ConnectButton } from '@rainbow-me/rainbowkit';
108

109
function CustomConnectButton() {
110
  return (
111
    <ConnectButton.Custom>
112
      {({
113
        account,
114
        chain,
115
        openAccountModal,
116
        openChainModal,
117
        openConnectModal,
118
        authenticationStatus,
119
        mounted,
120
      }) => {
121
        const ready = mounted && authenticationStatus !== 'loading';
122
        const connected =
123
          ready &&
124
          account &&
125
          chain &&
126
          (!authenticationStatus || authenticationStatus === 'authenticated');
127

128
        return (
129
          <div {...(!ready && { 'aria-hidden': true, style: { opacity: 0, pointerEvents: 'none', userSelect: 'none' } })}>
130
            {(() => {
131
              if (!connected) {
132
                return (
133
                  <button onClick={openConnectModal} type="button">
134
                    Connect Wallet
135
                  </button>
136
                );
137
              }
138

139
              if (chain.unsupported) {
140
                return (
141
                  <button onClick={openChainModal} type="button">
142
                    Wrong network
143
                  </button>
144
                );
145
              }
146

147
              return (
148
                <div style={{ display: 'flex', gap: 12 }}>
149
                  <button onClick={openChainModal} style={{ display: 'flex', alignItems: 'center' }} type="button">
150
                    {chain.hasIcon && (
151
                      <div style={{ background: chain.iconBackground, width: 12, height: 12, borderRadius: 999, overflow: 'hidden', marginRight: 4 }}>
152
                        {chain.iconUrl && <img alt={chain.name ?? 'Chain icon'} src={chain.iconUrl} style={{ width: 12, height: 12 }} />}
153
                      </div>
154
                    )}
155
                    {chain.name}
156
                  </button>
157

158
                  <button onClick={openAccountModal} type="button">
159
                    {account.displayName}
160
                    {account.displayBalance ? ` (${account.displayBalance})` : ''}
161
                  </button>
162
                </div>
163
              );
164
            })()}
165
          </div>
166
        );
167
      }}
168
    </ConnectButton.Custom>
169
  );
170
}
171
```
172

173
### WalletButton
174

175
Button component for connecting to a specific wallet.
176

177
```typescript { .api }
178
/**
179
 * Button component for connecting to a specific wallet
180
 * @param props - Wallet button configuration
181
 * @returns React component for specific wallet connection
182
 */
183
function WalletButton(props?: { wallet?: string }): JSX.Element;
184
```
185

186
### WalletButton.Custom
187

188
Custom render prop version of WalletButton for advanced wallet-specific UI.
189

190
```typescript { .api }
191
/**
192
 * Custom render prop version of WalletButton
193
 * @param props - Wallet button render prop configuration
194
 * @returns Custom rendered wallet connection UI
195
 */
196
function WalletButton.Custom(props: WalletButtonRendererProps): JSX.Element;
197

198
interface WalletButtonRendererProps {
199
  wallet?: string;
200
  children: (renderProps: WalletButtonRenderState) => ReactNode;
201
}
202

203
interface WalletButtonRenderState {
204
  error: boolean;
205
  loading: boolean;
206
  connected: boolean;
207
  ready: boolean;
208
  mounted: boolean;
209
  connector: WalletConnector;
210
  connect: () => Promise<void>;
211
}
212
```
213

214
### RainbowKitProvider
215

216
Root provider component that wraps your application and provides RainbowKit context.
217

218
```typescript { .api }
219
/**
220
 * Root provider component for RainbowKit
221
 * @param props - Provider configuration options
222
 * @returns React provider component
223
 */
224
function RainbowKitProvider(props: RainbowKitProviderProps): JSX.Element;
225

226
interface RainbowKitProviderProps {
227
  /** React children to wrap */
228
  children: ReactNode;
229
  /** Theme configuration (light, dark, or custom) */
230
  theme?: Theme | null;
231
  /** Whether to show recent transactions in account modal */
232
  showRecentTransactions?: boolean;
233
  /** Application information for wallet connection */
234
  appInfo?: AppInfo;
235
  /** Enable fun animations and effects */
236
  coolMode?: boolean;
237
  /** Custom avatar component */
238
  avatar?: AvatarComponent;
239
  /** Modal size configuration */
240
  modalSize?: ModalSizes;
241
  /** Localization language */
242
  locale?: Locale;
243
  /** Initial chain to connect to */
244
  initialChain?: Chain | number;
245
  /** Unique identifier for this provider instance */
246
  id?: string;
247
}
248

249
interface AppInfo {
250
  appName?: string;
251
  learnMoreUrl?: string;
252
  disclaimer?: DisclaimerComponent;
253
}
254

255
type ModalSizes = 'compact' | 'wide';
256
type DisclaimerComponent = (props: { Text: ComponentType<{ children: ReactNode }>; Link: ComponentType<{ children: ReactNode; href: string }> }) => ReactNode;
257
type AvatarComponent = (props: { address: string; ensImage?: string; size: number }) => ReactNode;
258
```
259

260
**Usage Examples:**
261

262
```typescript
263
import { RainbowKitProvider, lightTheme } from '@rainbow-me/rainbowkit';
264

265
// Basic provider setup
266
function App() {
267
  return (
268
    <RainbowKitProvider>
269
      {/* Your app components */}
270
    </RainbowKitProvider>
271
  );
272
}
273

274
// Fully configured provider
275
function CustomApp() {
276
  return (
277
    <RainbowKitProvider
278
      theme={lightTheme({
279
        accentColor: '#7b3cf0',
280
        accentColorForeground: 'white',
281
        borderRadius: 'small',
282
      })}
283
      showRecentTransactions={true}
284
      appInfo={{
285
        appName: 'My DApp',
286
        learnMoreUrl: 'https://example.com/learn',
287
        disclaimer: ({ Text, Link }) => (
288
          <Text>
289
            By connecting your wallet, you agree to the{' '}
290
            <Link href="https://example.com/terms">Terms of Service</Link> and acknowledge you have read and understand the protocol{' '}
291
            <Link href="https://example.com/disclaimer">disclaimer</Link>
292
          </Text>
293
        ),
294
      }}
295
      coolMode={true}
296
      locale="en"
297
      modalSize="compact"
298
    >
299
      {/* Your app components */}
300
    </RainbowKitProvider>
301
  );
302
}
303
```