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

# Connect Dapp UI to Virtual Environment

> Connect a wallet to a staged dapp on a Virtual Environment with RainbowKit, and send transactions for manual and end-to-end testing.

Virtual Environments work seamlessly with some of the most popular UI libraries for dapps. Follow the guides below to learn how to integrate Virtual Environments into your dapp's UI. If you use a different UI library and need assistance, contact us to include a guide for that library in our resources.

<Steps>
  ### Stage contracts

  Stage your smart contracts by following this guide:

  <Card title="Staging smart contracts" href="" />

  ### Fork the staging Virtual Environment

  Optionally, you may choose to fork the staging Virtual Environment and work on an independent copy.

  <Card title="Fork Virtual Environment" href="" />

  ### Collect deployment data

  Collect all deployment data:

  * Fork RPC
  * Contracts' addresses
  * Contracts' ABI

  ### Integrate

  Depending on the framework you're using, follow the appropriate guide to connect your dapp's UI to the Virtual Environment.

  <CardGroup cols={2}>
    <Card title="Wagmi Integration Guide" href="/virtual-environments/dapp-ui/wagmi" />

    <Card title="Dynamic Integration Guide" href="/virtual-environments/dapp-ui/dynamic" />

    <Card title="ConnectKit Integration Guide" href="/virtual-environments/dapp-ui/connectkit" />

    <Card title="RainbowKit Integration Guide" href="/virtual-environments/dapp-ui/rainbowkit" />

    <Card title="Web3 Modal Integration Guide" href="/virtual-environments/dapp-ui/reown" />
  </CardGroup>
</Steps>