---
title: "Create custom styled merchandising widget components"
slug: "create-custom-styled-merchandising-widget-components"
abstract: "Using custom styled merchandising widgets with Sitecore Discover JS SDK and UI Components for React."
---
# Create custom styled merchandising widget components

Sitecore Discover UI Components package includes templates of styled widget components that are widget components built with UI components primitives and styles. You can edit the styles in these components or replace entire components.

To create a custom styled query hooked recommendation widget component:

1. In the UI components reference site, in the **Widget templates** section, open the **Recommendation** page.
2. In your React project, in the `widget_components` folder, create a folder named `carouselStyled`.
3. From the list of templates, in the **Styled carousel** page, click `index.js` to copy the code block.
4. In the `carouselStyled` folder, create a JavaScript file called `index.js`, then paste the copied code block into it, and save.
5. From the list of templates, in the **Styled carousel** page, click `styled.js` to copy the code block.
6. In the `carouselStyled` folder, create a JavaScript file, `styled.js` then paste the copied code block into it, and save.
7. In `styled.js`, edit the styled primitives, and save.
8. In your `application` component, add component as shown in the following code block.

    ```js
    imports ( Recommendation ) from "./widget_components/carouselStyled";

    const MyApp = () => {
        return (
            <WidgetsProvider
                    env='<environment>'
                    customerKey='<customer key>'
                    apiKey='<api key>'
                    useToken
                >
                <Recommendation rfkId="styled_recommendation" />
            </WidgetsProvider>
        )
    };
    ```

9. To avoid compile errors, update the imports section, and save.

> [!note]
> **Notice**
> These React resources can help you with your implementation:
>
> -   To view working examples of widgets, visit the [starter kit website](https://developers.sitecorecloud.io/discover-sdk/react/website) built using Discover JS SDK and UI components packages.
>
> -   You can download or fork its [GitHub repository](https://github.com/Sitecore/Discover-JS-SDK-Starter-kit).