> ## Documentation Index
> Fetch the complete documentation index at: https://v1.docs.megapot.io/llms.txt
> Use this file to discover all available pages before exploring further.

# MegapotProvider

> The MegapotProvider is a context provider component that sets up the Megapot UI environment. It provides theming and wallet connection functionalities.

### Usage

```tsx theme={null}
 <MegapotProvider
    theme={{
      primaryColor: '#693efe',
      theme: 'dark',
    }}
    onConnectWallet={login}
    onSwitchChain={switchChain}
  >
    {children}
  </MegapotProvider>
```

### Props

<table><thead><tr><th>Name</th><th>Type</th><th>Description</th><th>Default</th></tr></thead><tbody><tr><td>onConnectWallet\*</td><td><pre>`() => void
`</pre></td><td>This function handles the logic for connecting to a wallet, compatible with any wallet provider's connect</td><td /></tr><tr><td>onSwitchChain</td><td><pre>`(chainId: number) => void
`</pre></td><td>An optional function that handles chain switching logic, compatible with any wallet provider's connect</td><td /></tr><tr><td>theme</td><td><pre>`MegapotThemeProps
`</pre></td><td>An optional theme object to override the default Megapot theme.</td><td /></tr></tbody></table>

## Theming

The MegapotProvider allows you to customize the theme by passing a theme prop. This prop should be an object that matches the MegapotThemeProps type. The theme will be deeply merged with the default theme.

### MegapotThemeProps

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Description</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>theme</td>
      <td><pre>`'dark' | 'light'`</pre></td>
      <td>Sets the overall theme of the application. Choose between 'dark' and 'light'.</td>
    </tr>

    <tr>
      <td>primaryColor</td>
      <td><pre>`string`</pre></td>
      <td>Defines the primary color used throughout the UI Kit.</td>
    </tr>

    <tr>
      <td>fontFamily</td>
      <td><pre>`string`</pre></td>
      <td>Defines the font family used throughout the UI Kit.</td>
    </tr>

    <tr>
      <td>text</td>
      <td><pre>`{ default?: string; caption?: string; }`</pre></td>
      <td>Customize text colors.</td>
    </tr>

    <tr>
      <td>button</td>
      <td><pre>`{ default?: React.CSSProperties; text?: React.CSSProperties; }`</pre></td>
      <td>Override default button and text button styles.</td>
    </tr>

    <tr>
      <td>input</td>
      <td><pre>`React.CSSProperties`</pre></td>
      <td>CSS properties to override input styles.</td>
    </tr>

    <tr>
      <td>widget</td>
      <td><pre>`{ style?: React.CSSProperties; }`</pre></td>
      <td>CSS properties to override widget styles.</td>
    </tr>

    <tr>
      <td>borderRadius</td>
      <td><pre>`string`</pre></td>
      <td>Defines the border radius for Input and Button components.</td>
    </tr>
  </tbody>
</table>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.