---
title: "Walkthrough: Adding widgets to the React application"
slug: "walkthrough--adding-widgets-to-the-react-application"
abstract: "Walkthrough describing how to add widgets to your React application using Sitecore Discover JS SDK."
---
# Walkthrough: Adding widgets to the React application

This walkthrough is the part six of the [Developing the UI walkthrough series](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/developing-the-ui-walkthrough-series.html "Developing the UI walkthrough series").

During the last step of developing the UI for Sitecore Discover, you bring together previously created widget components into your React application.

This walkthrough describes how to:

- Render with the WidgetsProvider component
- Style widget components with a theme

## Render with the WidgetsProvider component

The following code block shows the `WidgetsProvider` component with credentials for authentication when your domain is not set up with Discover. Here, `publicSuffix` has been set to `true` because the top-level domain of this implementation restricts cookies.

The following procedure and code block assume that you have the following configuration:

- `header_ps` is a preview widget set to appear on all pages.
- `footer_rec` is a recommendation widget set to appear on all pages.

To add `header_ps` and `footer_rec` to your webpage, paste the folllowing codeblock:

```js
import { WidgetsProvider }from "@sitecore-discover/react";
import MyGlobalPreviewSearch from "./widget_components/myGlobalPreviewSearch";
import MyGlobalRecommendationWidget from "./widget_components/myGlobalRecommendationWidget";

const Root = () => {
    return (
          <WidgetsProvider
                publicSuffix='true'
                env='<environment>'
                customerKey='<customer key>'
                apiKey='<api key>'
                useToken >

            <header>
              <h1>My Application</h1>
              <MyGlobalPreviewSearch rfkId="header_ps" />
            </header>

            <div class="content">
                OTHER WIDGET COMPONENTS GO HERE
            </div>

            <footer>
                <MyGlobalRecommendationWidget rfkId="footer_rec" />
            </footer>

          </WidgetsProvider>
)};
```

## Style widget components with a theme

Theming an application with CSS variables is the fastest way to style your components. You can use the default theme or a custom theme.

To create and use a custom theme:

1. In your React project, open your `application` component.
2. In the component, create a default theme object as shown in the following code block, and fix import statements they are broken.

    ```js
    import { createTheme } from '@sitecore-discover/ui'; 

    const myTheme = createTheme();
    ```

3. To create a custom theme, add CSS variables as shown in the following:

    ```js
    import { createTheme } from '@sitecore-discover/ui'

    const myTheme = createTheme({
      palette: {
        primary: {
          main: '#F00',
          light: '#EEECFB',
          dark: '#4A37D5',
          contrastText: '#fff',
        },
      }
    });
    ```

4. In your `application` component, in the return statement, in the `div` wrapper of `WidgetsProvider`, set the value to style as shown in following:

    ```js
    <div style={myTheme.style}>
      <WidgetsProvider>Content nested in theme.</WidgetsProvider>
    </div>
    ```