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

# withWeaverse

> The withWeaverse HOC enhances your root component, allowing it to access Weaverse-specific properties and methods.

**`withWeaverse`** HOC is a crucial part of the architecture. It wraps the root component and any error boundaries to
ensure that Weaverse functionalities are available throughout the application.

## Usage

Implement **`withWeaverse`** in your root component and error boundary components to provide them with Weaverse
integration. This process allows the components to access the loaded Weaverse theme settings and other context-specific
data provided by Weaverse.

Here's a basic example of how to wrap your root component with **`withWeaverse`**:

```tsx theme={null}
import { withWeaverse } from '@weaverse/hydrogen'

function App() {
  // Your component logic
}

export default withWeaverse(App)
```

Similarly, for an error boundary component:

```tsx theme={null}
export const ErrorBoundary = withWeaverse(ErrorBoundaryComponent)
```

## How It Works

By wrapping a component with **`withWeaverse`**, the component gains access to the Weaverse context, which includes
theme settings, page configurations, and other essential data loaded via the Weaverse client. This allows for consistent
use of Weaverse features across the entire app.