> ## Documentation Index
> Fetch the complete documentation index at: https://developer.tailwind.zone/llms.txt
> Use this file to discover all available pages before exploring further.

# With web3-react

> Web3 React is a Uniswap-maintained wallet connect library useable with MetaMask and TAILWIND.

# Support TAILWIND in 5 minutes

<Steps>
  <Step title="Download TAILWIND extension">
    Download the [extension](https://chromewebstore.google.com/detail/dpnfollacokcbkeiidhplhjpafkbfacj)
    and create an account. If needed, you can follow the onboarding guide [here](https://support.tailwind.zone/get-tailwind).
  </Step>

  <Step title="Download TAILWIND wallet adapter">
    ```bash
    yarn add @tailwindzone/connect-web3-react
    ```
  </Step>

  <Step title="Import or instantiate TAILWIND connector">
    <CodeGroup>
      ```typescript Library import connector
      import { tailwindConnector } from '@tailwindzone/connect-web3-react'
      ```

      ```typescript Manually instantiate a connector
      import { initializeConnector } from '@web3-react/core'
      import { TailwindConnector } from '@tailwindzone/connect-web3-react'

      const tailwindConnector = initializeConnector(actions => new TailwindConnector({ actions })) 
      ```
    </CodeGroup>
  </Step>

  <Step title="Use TAILWIND as a Provider">
    Tailwind has the same API as MetaMask.

    ```tsx
    import { MetaMask } from "@web3-react/metamask"

    const metaMaskConnector = initializeConnector(
      actions => new MetaMask({ actions })
    );

    const connectors = [
      metaMaskConnector,
      tailwindConnector
    ];

    ReactDOM.createRoot(document.getElementById('root')!).render(
      <React.StrictMode>
        <Web3ReactProvider
          connectors={connectors}
        >
          { /* Your app goes here */ } 
          <App />
        </Web3ReactProvider>
      </React.StrictMode>,
    );
    ```
  </Step>

  <Step title="Sign a sample transaction">
    Inside your React app, you can use `web3-react` hooks to
    request connection and sign transactions.

    ```tsx
    import { useWeb3React } from "@web3-react/core"

    function App() {
      const {
        connector,
        provider
      } = useWeb3React()

      return (
        <>
          <button onClick={() => {
            const [tailwind] = tailwindConnector
            tailwind.connectEagerly().catch(console.error)
          }}>
            Connect to TAILWIND
          </button>

          {connector && (<button onClick={async () => {
            // send transaction to JSON RPC
            await provider.sendTransaction(tx);
          }}>
            Sign Transaction
          </button>)}
        </>
     );
    }
    ```
  </Step>

  <Step title="Done!">
    You just supported a universal USDC gas wallet.
    Prepare to get more users!
  </Step>
</Steps>

## Troubleshooting


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