> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Recommendations

> Show recommended items from Algolia Recommend in your React InstantSearch app.

export const Facet = () => <Tooltip tip="An attribute in your records that lets users filter or group results (for example, by color, brand, or price)." cta="Faceting" href="/doc/guides/managing-results/refine-results/faceting">
    facet
  </Tooltip>;

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

<div className="not-prose algolia-flavor-switcher">
  <div className="afs-dropdown">
    <div className="afs-trigger" role="button" tabIndex="0" aria-haspopup="listbox">
      <span className="afs-current">React</span>

      <svg className="afs-chevron lucide lucide-chevron-down" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="m6 9 6 6 6-6" />
      </svg>
    </div>

    <ul className="afs-menu" role="listbox">
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/ui-and-ux-patterns/recommend/js"><span className="afs-option-name">JavaScript</span><span className="afs-option-lib">InstantSearch.js</span></a></li>
      <li role="option" aria-selected="true"><a className="afs-option is-current" href="/doc/guides/building-search-ui/ui-and-ux-patterns/recommend/react"><span className="afs-option-name">React</span><span className="afs-option-lib">React InstantSearch</span></a></li>
    </ul>
  </div>
</div>

<Note>
  This is the **React InstantSearch v7** documentation.
  If you're upgrading from v6, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7).
  If you were using React InstantSearch Hooks,
  this v7 documentation applies—just check for [necessary changes](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7).
  To continue using v6, you can find the [archived documentation](https://algolia.com/old-docs/deprecated/instantsearch/react/v6/api-reference/instantsearch/).
</Note>

React InstantSearch provides widgets for displaying recommendations on your site with [Algolia Recommend](/doc/guides/algolia-recommend/overview).
**Recommendations encourage users to discover more of your catalog based on what they're already interested in.**

* [Frequently Bought Together](#frequently-bought-together)
* [Related Items](#related-items)
* [Trending Items](#trending-items)
* [Looking Similar](#looking-similar)

**Recommendations are an ideal complement to search experiences.**
If users land on an item which isn't exactly what they were searching for, they can effortlessly jump to similar items.
Conversely, when they find what they want, they can discover items that would complement their current selection.

### Frequently Bought Together

Frequently Bought Together recommends items that users often buy together (based on [conversion events](/doc/guides/sending-events)). The component lets you pass a reference item, and displays a list of recommended items using the [Frequently Bought Together](/doc/guides/algolia-recommend/overview#frequently-bought-together) model from Algolia Recommend.
See the [`FrequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/react) component.

### Related Items

These models recommend items that are related to each other (based on [click and conversion events](/doc/guides/sending-events)). The component lets you pass a reference item, and displays a list of recommended items using the [Related Items](/doc/guides/algolia-recommend/overview#related-items) model from Algolia Recommend.
See the [`RelatedProductsd`](/doc/api-reference/widgets/related-products/react) component.

### Trending Items

The **Trending Items** model looks for popular items in your product catalog.
Trends can be global, for example, recommend the most popular items in your entire product catalog.
Or it can also be within a specific <Facet /> or category, for example, recommend the most popular winter sweaters.

The [`TrendingItems`](/doc/api-reference/widgets/trending-items/react) component has the option to fetch global trends or trends within a facet and
displays a list of trending items using the [Trending Items](/doc/guides/algolia-recommend/overview#trending-items-and-trending-facet-values) model from Algolia Recommend.

### Looking Similar

This model recommends items that are visually related to each other,
based on the images linked in your <Index />.

The component lets you pass a source item,
and displays a list of recommended items using the [Looking Similar](/doc/guides/algolia-recommend/overview#looking-similar) model from Algolia Recommend.
See the [`LookingSimilar`](/doc/api-reference/widgets/looking-similar/react) component.