> For the complete documentation index, see [llms.txt](https://block3d.gitbook.io/block3d/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://block3d.gitbook.io/block3d/components/block3r.md).

# Block3r

```typescript
/* /src/components/Block3r.tsx */

import React from "react";
import { Inter } from "next/font/google";
import { WagmiConfig } from "wagmi";
import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
import "@rainbow-me/rainbowkit/styles.css";
import * as chains from "viem/chains";
import { wagmiConfig } from "../../../src/config/wagmiConfig";
import { Block3rContent } from "./Block3rContent";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const inter = Inter({ subsets: ["latin"] });

const allChains = Object.values(chains);
const queryClient = new QueryClient();

export function Block3r({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <WagmiConfig config={wagmiConfig}>
          <QueryClientProvider client={queryClient}>
            <RainbowKitProvider chains={allChains}>
              <Block3rContent>{children}</Block3rContent>
            </RainbowKitProvider>
          </QueryClientProvider>
        </WagmiConfig>
      </body>
    </html>
  );
}
```
