> 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/getting-started/wrapper.md).

# Wrapper

The \`Block3r\` component lives at the app's root and wraps the entire site. It contains a WagmiConfig, RainbowKitProvider, and a QueryClientProvider.

In order to use the [Block3r](/block3d/components/block3r.md) component, you'll need to pass it a [wagmi config](https://wagmi.sh/react/getting-started#create-config) and a [block3dConfig](/block3d/getting-started/config.md).

## Example root

*If you are not using a layout file, wrap the root `app.tsx` file instead.*

```typescript
/*  src/app/layout.tsx  */

"use client";
import { Block3r } from "block3d";
import block3dConfig from "../../block3d.config";
import { config } from "../../wagmi.config";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Block3r block3dConfig={block3dConfig} wagmiConfig={config}>
          {children}
        </Block3r>
      </body>
    </html>
  );
}
```