---
title: "Walkthrough: Creating widget components manually"
slug: "walkthrough--creating-widget-components-manually"
abstract: "Walkthrough to create widget components manually in for Sitecore Discover"
---
# Walkthrough: Creating widget components manually

This walkthrough is the part three 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").

As part of a Sitecore Discover implementation, you need to create and add widget components to your React application.

This walkthrough describes how to create a widget component manually using the UI components reference site. You need to repeat this walkthrough for every widget in your project.

Alternatively, you can create widget components [using the Discover UI Components CLI.](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/developing-the-ui-walkthrough-series/walkthrough--creating-widget-components-using-the-cli.html "Walkthrough: Creating widget components using the CLI").

This walkthrough describes how to:

- Create a widget component using the UI reference site.
- Edit the widget component code to match design
- Edit the styles of the widget component.
- Style widget components with a theme.

## Create a widget component using the UI reference site.

Adding widgets to your React application can involve using widget components from the JS SDK package or creating widget components using widget templates in the UI Components package. The templates include the code to query hook UI components. At runtime, the widget component renders when data is received for its `rfk_id` ID.

> [!note]
> For content personalization widgets, use [widget components](https://doc.sitecore.com/discover/en/developers/discover-js-sdk-for-react/developing-the-ui-walkthrough-series/components.html "Components") from the JS SDK package.
>
> For merchandising widgets, creating widget components is similar irrespective of widget type. Simply repeat the procedure in this section for every widget. Make sure you choose a template for the widget's type.

To create a query hooked recommendation widget component:

1. On the [Discover UI components reference](https://developers.sitecorecloud.io/discover-sdk/react/latest/storybook/index.html?path=/docs/introduction--page) site, in the **Widget templates** section, open the page for **Recommendation** widget templates.
2. From the list of templates for recommendation widgets, in the **Carousel** section, click `index.js` to copy the code block.
3. In your React project, if you do not have a folder called `widget_components`, create one.
4. In the `widget_components` folder, create a folder named `carousel`, named after the selected recommendation widget option.
5. In the `carousel` folder, create a JavaScript file, `index.js`, then paste the copied code block, and save the file.
6. To avoid compile errors, update the imports section, and save the file.

> [!note]
> You can style widget components with theme variables, using styled widget components, or by applying custom style in the components.

## Edit the widget component code to match design

The widget component in the `index.js` or `index.ts` file is based on default product and category entities. They might have more or less attributes than those in your system.

To edit the widget component code to match design:

1. Open the `index.js` or `index.ts` file.
2. To match your requirements for the widget and to reflect attributes included in the results fetched by the JS SDK, edit the product and category models in the React code.
3. Save the file.

### Caution

Make sure all attributes used in a widget component have been defined in the **[Domain settings](https://doc.sitecore.com/discover/en/users/discover-user-guide/en/domain-settings.html)** section of the CEC. The attributes have to be selected to return in the API.

Invalid entity attributes can throw runtime errors.

## Edit the styles of a styled widget component

If the CLI did not generate a `styled.js` or `styled.ts` file, skip the following procedure.

To edit the styles of a styled widget component to match the design:

- In the `styled.js` or `styled.ts` file, edit the styles.

## 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>
    ```