# WixPatternsProvider

**Category:** Base Components/Providers

## API

### Overview

`WixPatternsProvider` is the recommended top-level provider for most Wix Patterns applications. It auto-detects the environment (BM, Essentials, Giza) and supplies the appropriate context. Wrap your entire app with this provider.

> **Note: If you're using [Yoshi BM Flow](https://bo.wix.com/pages/yoshi/docs/business-manager-flow/overview) over Business-Manager, you can use [WixPatternsBMProvider](./?path=/story/base-components-providers--wixpatternsbmprovider) if you prefer.**

> **Note: If you're using [Yoshi BM Flow](https://bo.wix.com/pages/yoshi/docs/business-manager-flow/overview) over Giza, you may choose to use [WixPatternsGizaProvider](./?path=/story/base-components-providers--wixpatternsgizaprovider) as an option.**

> **Note: If you're using [Yoshi Fullstack](https://bo.wix.com/pages/yoshi/docs/fullstack-flow/overview), use [WixPatternsEssentialsProvider](./?path=/story/base-components-providers--wixpatternsessentialsprovider) instead.**




A React context provider for `Wix Patterns`'s essentials dependencies.


Use `WixPatternsBaseProvider` in case your app does not run under a Giza/WixEssentials configured environment, so you fully control the injection of services (such as i18n,sentry).


```tsx
import { WixPatternsProvider } from '@wix/patterns/provider';
```

### Requirements

Verify `@wix/dashboard` is installed in your project.

```bash
yarn add @wix/dashboard
```

Or, if you're using npm:

```bash
npm install @wix/dashboard
```


### Usage

On the page where you want to use Wix Patterns, you need to add a `WixDesignSystemProvider` followed by a `WixPatternsProvider`.

```jsx
import React from 'react';
import { withDashboard } from '@wix/patterns';
import { WixDesignSystemProvider } from '@wix/design-system';
import { WixPatternsProvider } from '@wix/patterns/provider';

export default withDashboard(() => {
  return (
    
      
        {
          // Wix Patterns components
        }
      
    
  );
});
```