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

Sitecore Search 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 **Search results** page.
2. In your React project, in the `widget_components` folder, create a folder named `searchResultsBasicStory`.
3. From the list of templates, in the **Basic story** page, click `index.js` to copy the code block.
4. In the `searchResultsBasicStory` 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 **Basic story** page, click `styled.js` to copy the code block.
6. In the `searchResultsBasicStory` 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 ( SearchResultsBasicStory ) from "./widget_components/searchResultsBasicStory";

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

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

> [!tip]
> React resources for your implementation:
>
> -   To view working examples of Discover widgets, visit the [starter kit website](https://developers.sitecorecloud.io/search-sdk/react/website) built using Search JS SDK and UI components packages.
>
> -   You can download or fork its [GitHub repository](https://github.com/Sitecore/Sitecore-Search-JS-SDK-Starter-Kit/blob/main/README.md).
>
> -   The Search [Search UI components reference](https://developers.sitecorecloud.io/search-sdk/react/latest/storybook/index.html) lists all available widget templates, UI components, and theming variables.
>
> -   Use the [UI components CLI](https://www.npmjs.com/package/@sitecore-search/cli) to replicate widget templates in your IDE.