diff --git a/bundlesize.config.json b/bundlesize.config.json
index 42649581f8..1be8588259 100644
--- a/bundlesize.config.json
+++ b/bundlesize.config.json
@@ -10,7 +10,7 @@
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.production.min.js",
-      "maxSize": "84.50 kB"
+      "maxSize": "85.25 kB"
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.development.js",
@@ -18,11 +18,11 @@
     },
     {
       "path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",
-      "maxSize": "52 kB"
+      "maxSize": "52.25 kB"
     },
     {
       "path": "packages/react-instantsearch/dist/umd/ReactInstantSearch.min.js",
-      "maxSize": "66 kB"
+      "maxSize": "66.75 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",
diff --git a/packages/instantsearch-ui-components/src/components/Carousel.tsx b/packages/instantsearch-ui-components/src/components/Carousel.tsx
index 7916447a37..0f263b738f 100644
--- a/packages/instantsearch-ui-components/src/components/Carousel.tsx
+++ b/packages/instantsearch-ui-components/src/components/Carousel.tsx
@@ -1,4 +1,5 @@
 /** @jsx createElement */
+
 import { cx } from '../lib';
 
 import { createDefaultItemComponent } from './recommend-shared';
diff --git a/packages/instantsearch-ui-components/src/components/TrendingFacets.tsx b/packages/instantsearch-ui-components/src/components/TrendingFacets.tsx
new file mode 100644
index 0000000000..c06294ff1f
--- /dev/null
+++ b/packages/instantsearch-ui-components/src/components/TrendingFacets.tsx
@@ -0,0 +1,107 @@
+/** @jsx createElement */
+
+import { cx } from '../lib';
+
+import {
+  createDefaultEmptyComponent,
+  createDefaultHeaderComponent,
+  createListComponent,
+} from './recommend-shared';
+
+import type {
+  ComponentProps,
+  RecommendClassNames,
+  RecommendComponentProps,
+  RecommendTranslations,
+  Renderer,
+  TrendingFacetHit,
+} from '../types';
+
+export type TrendingFacetsProps<
+  TComponentProps extends Record<string, unknown> = Record<string, unknown>
+> = ComponentProps<'div'> &
+  Omit<
+    RecommendComponentProps<TrendingFacetHit, TComponentProps>,
+    'itemComponent'
+  > & {
+    itemComponent: RecommendComponentProps<
+      TrendingFacetHit,
+      TComponentProps
+    >['itemComponent'];
+  };
+
+export function createTrendingFacetsComponent({
+  createElement,
+  Fragment,
+}: Renderer) {
+  return function TrendingFacets(userProps: TrendingFacetsProps) {
+    const {
+      classNames = {},
+      emptyComponent: EmptyComponent = createDefaultEmptyComponent({
+        createElement,
+        Fragment,
+      }),
+      headerComponent: HeaderComponent = createDefaultHeaderComponent({
+        createElement,
+        Fragment,
+      }),
+      // Fallback to a no-op component if no itemComponent is provided
+      // This is to ensure that the component can render when the layout
+      // the user provided does not need an itemComponent, but still allows
+      // us to later create a default itemComponent that has an action.
+      itemComponent: ItemComponent = () => null as any,
+      layout: Layout = createListComponent({ createElement, Fragment }),
+      items,
+      status,
+      translations: userTranslations,
+      sendEvent,
+      ...props
+    } = userProps;
+
+    const translations: Required<RecommendTranslations> = {
+      title: 'Trending facets',
+      sliderLabel: 'Trending facets',
+      ...userTranslations,
+    };
+
+    const cssClasses: RecommendClassNames = {
+      root: cx('ais-TrendingFacets', classNames.root),
+      emptyRoot: cx(
+        'ais-TrendingFacets',
+        classNames.root,
+        'ais-TrendingFacets--empty',
+        classNames.emptyRoot,
+        props.className
+      ),
+      title: cx('ais-TrendingFacets-title', classNames.title),
+      container: cx('ais-TrendingFacets-container', classNames.container),
+      list: cx('ais-TrendingFacets-list', classNames.list),
+      item: cx('ais-TrendingFacets-item', classNames.item),
+    };
+
+    if (items.length === 0 && status === 'idle') {
+      return (
+        <section {...props} className={cssClasses.emptyRoot}>
+          <EmptyComponent />
+        </section>
+      );
+    }
+
+    return (
+      <section {...props} className={cssClasses.root}>
+        <HeaderComponent
+          classNames={cssClasses}
+          items={items}
+          translations={translations}
+        />
+
+        <Layout
+          classNames={cssClasses}
+          itemComponent={ItemComponent || (() => null as any)}
+          items={items}
+          sendEvent={sendEvent}
+        />
+      </section>
+    );
+  };
+}
diff --git a/packages/instantsearch-ui-components/src/components/__tests__/TrendingFacets.test.tsx b/packages/instantsearch-ui-components/src/components/__tests__/TrendingFacets.test.tsx
new file mode 100644
index 0000000000..94cbb0bc55
--- /dev/null
+++ b/packages/instantsearch-ui-components/src/components/__tests__/TrendingFacets.test.tsx
@@ -0,0 +1,396 @@
+/**
+ * @jest-environment jsdom
+ */
+/** @jsx createElement */
+import { render } from '@testing-library/preact';
+import userEvent from '@testing-library/user-event';
+import { createElement, Fragment } from 'preact';
+
+import { createTrendingFacetsComponent } from '../TrendingFacets';
+
+import type { TrendingFacetsProps } from '../TrendingFacets';
+
+const TrendingFacets = createTrendingFacetsComponent({
+  createElement,
+  Fragment,
+});
+
+const ItemComponent: TrendingFacetsProps['itemComponent'] = ({ item }) => (
+  <div>{item.objectID}</div>
+);
+
+describe('TrendingFacets', () => {
+  test('renders items with default layout and header', () => {
+    const { container } = render(
+      <TrendingFacets
+        status="idle"
+        items={[
+          {
+            objectID: 'category:electronics',
+            _score: 1,
+            attribute: 'category',
+            value: 'electronics',
+            __position: 1,
+          },
+          {
+            objectID: 'category:books',
+            _score: 2,
+            attribute: 'category',
+            value: 'books',
+            __position: 2,
+          },
+        ]}
+        itemComponent={ItemComponent}
+        sendEvent={jest.fn()}
+      />
+    );
+
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <section
+          class="ais-TrendingFacets"
+        >
+          <h3
+            class="ais-TrendingFacets-title"
+          >
+            Trending facets
+          </h3>
+          <div
+            class="ais-TrendingFacets-container"
+          >
+            <ol
+              class="ais-TrendingFacets-list"
+            >
+              <li
+                class="ais-TrendingFacets-item"
+              >
+                <div>
+                  category:electronics
+                </div>
+              </li>
+              <li
+                class="ais-TrendingFacets-item"
+              >
+                <div>
+                  category:books
+                </div>
+              </li>
+            </ol>
+          </div>
+        </section>
+      </div>
+    `);
+  });
+
+  test('renders default empty component', () => {
+    const { container } = render(
+      <TrendingFacets
+        status="idle"
+        items={[]}
+        itemComponent={ItemComponent}
+        sendEvent={jest.fn()}
+      />
+    );
+
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <section
+          class="ais-TrendingFacets ais-TrendingFacets--empty"
+        >
+          No results
+        </section>
+      </div>
+    `);
+  });
+
+  test('renders custom header', () => {
+    const { container } = render(
+      <TrendingFacets
+        status="idle"
+        items={[
+          {
+            objectID: '1:1',
+            _score: 1,
+            attribute: '1',
+            value: '1',
+            __position: 1,
+          },
+        ]}
+        headerComponent={({ classNames }) => (
+          <div className={classNames.title}>My custom header</div>
+        )}
+        itemComponent={ItemComponent}
+        sendEvent={jest.fn()}
+      />
+    );
+
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <section
+          class="ais-TrendingFacets"
+        >
+          <div
+            class="ais-TrendingFacets-title"
+          >
+            My custom header
+          </div>
+          <div
+            class="ais-TrendingFacets-container"
+          >
+            <ol
+              class="ais-TrendingFacets-list"
+            >
+              <li
+                class="ais-TrendingFacets-item"
+              >
+                <div>
+                  1:1
+                </div>
+              </li>
+            </ol>
+          </div>
+        </section>
+      </div>
+    `);
+  });
+
+  test('renders custom layout', () => {
+    const { container } = render(
+      <TrendingFacets
+        status="idle"
+        items={[
+          {
+            objectID: '1:1',
+            _score: 1,
+            attribute: '1',
+            value: '1',
+            __position: 1,
+          },
+        ]}
+        itemComponent={ItemComponent}
+        layout={(props) => (
+          <div className={props.classNames.container}>
+            <ol className={props.classNames.list}>
+              {props.items.map((item) => (
+                <li key={item.objectID} className={props.classNames.item}>
+                  <props.itemComponent
+                    item={item}
+                    onClick={jest.fn()}
+                    onAuxClick={jest.fn()}
+                    sendEvent={jest.fn()}
+                  />
+                </li>
+              ))}
+            </ol>
+          </div>
+        )}
+        sendEvent={jest.fn()}
+      />
+    );
+
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <section
+          class="ais-TrendingFacets"
+        >
+          <h3
+            class="ais-TrendingFacets-title"
+          >
+            Trending facets
+          </h3>
+          <div
+            class="ais-TrendingFacets-container"
+          >
+            <ol
+              class="ais-TrendingFacets-list"
+            >
+              <li
+                class="ais-TrendingFacets-item"
+              >
+                <div>
+                  1:1
+                </div>
+              </li>
+            </ol>
+          </div>
+        </section>
+      </div>
+    `);
+  });
+
+  test('renders custom empty component', () => {
+    const { container } = render(
+      <TrendingFacets
+        status="idle"
+        items={[]}
+        emptyComponent={() => <Fragment>My custom empty component</Fragment>}
+        itemComponent={ItemComponent}
+        sendEvent={jest.fn()}
+      />
+    );
+
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <section
+          class="ais-TrendingFacets ais-TrendingFacets--empty"
+        >
+          My custom empty component
+        </section>
+      </div>
+    `);
+  });
+
+  test('sends a `click` event when clicking on an item', () => {
+    const sendEvent = jest.fn();
+    const items = [
+      { objectID: '1:1', _score: 1, attribute: '1', value: '1', __position: 1 },
+    ];
+
+    const { container } = render(
+      <TrendingFacets
+        status="idle"
+        items={items}
+        itemComponent={ItemComponent}
+        sendEvent={sendEvent}
+      />
+    );
+
+    userEvent.click(container.querySelectorAll('.ais-TrendingFacets-item')[0]!);
+
+    expect(sendEvent).toHaveBeenCalledTimes(1);
+    expect(sendEvent).toHaveBeenNthCalledWith(
+      1,
+      'click:internal',
+      items[0],
+      'Item Clicked'
+    );
+  });
+
+  test('accepts custom title translation', () => {
+    const { container } = render(
+      <TrendingFacets
+        status="idle"
+        items={[
+          {
+            objectID: '1:1',
+            _score: 1,
+            attribute: '1',
+            value: '1',
+            __position: 1,
+          },
+        ]}
+        translations={{ title: 'My custom title' }}
+        itemComponent={ItemComponent}
+        sendEvent={jest.fn()}
+      />
+    );
+
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <section
+          class="ais-TrendingFacets"
+        >
+          <h3
+            class="ais-TrendingFacets-title"
+          >
+            My custom title
+          </h3>
+          <div
+            class="ais-TrendingFacets-container"
+          >
+            <ol
+              class="ais-TrendingFacets-list"
+            >
+              <li
+                class="ais-TrendingFacets-item"
+              >
+                <div>
+                  1:1
+                </div>
+              </li>
+            </ol>
+          </div>
+        </section>
+      </div>
+    `);
+  });
+
+  test('forwards `div` props to the root element', () => {
+    const { container } = render(
+      <TrendingFacets
+        status="idle"
+        items={[
+          {
+            objectID: '1:1',
+            _score: 1,
+            attribute: '1',
+            value: '1',
+            __position: 1,
+          },
+        ]}
+        hidden={true}
+        itemComponent={ItemComponent}
+        sendEvent={jest.fn()}
+      />
+    );
+
+    expect(
+      container.querySelector<HTMLDivElement>('.ais-TrendingFacets')!.hidden
+    ).toBe(true);
+  });
+
+  test('accepts custom class names', () => {
+    const { container } = render(
+      <TrendingFacets
+        status="idle"
+        items={[
+          {
+            objectID: '1:1',
+            _score: 1,
+            attribute: '1',
+            value: '1',
+            __position: 1,
+          },
+        ]}
+        classNames={{
+          root: 'ROOT',
+          title: 'TITLE',
+          container: 'CONTAINER',
+          list: 'LIST',
+          item: 'ITEM',
+        }}
+        itemComponent={ItemComponent}
+        sendEvent={jest.fn()}
+      />
+    );
+
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <section
+          class="ais-TrendingFacets ROOT"
+        >
+          <h3
+            class="ais-TrendingFacets-title TITLE"
+          >
+            Trending facets
+          </h3>
+          <div
+            class="ais-TrendingFacets-container CONTAINER"
+          >
+            <ol
+              class="ais-TrendingFacets-list LIST"
+            >
+              <li
+                class="ais-TrendingFacets-item ITEM"
+              >
+                <div>
+                  1:1
+                </div>
+              </li>
+            </ol>
+          </div>
+        </section>
+      </div>
+    `);
+  });
+});
diff --git a/packages/instantsearch-ui-components/src/components/index.ts b/packages/instantsearch-ui-components/src/components/index.ts
index 034b2b8943..7c389f050b 100644
--- a/packages/instantsearch-ui-components/src/components/index.ts
+++ b/packages/instantsearch-ui-components/src/components/index.ts
@@ -5,3 +5,4 @@ export * from './Hits';
 export * from './LookingSimilar';
 export * from './RelatedProducts';
 export * from './TrendingItems';
+export * from './TrendingFacets';
diff --git a/packages/instantsearch-ui-components/src/types/Recommend.ts b/packages/instantsearch-ui-components/src/types/Recommend.ts
index be43ddf7fb..18a6148c63 100644
--- a/packages/instantsearch-ui-components/src/types/Recommend.ts
+++ b/packages/instantsearch-ui-components/src/types/Recommend.ts
@@ -100,3 +100,22 @@ export type RecommendItemComponentProps<TObject> = {
 
 // @TODO: use instantsearch status instead
 export type RecommendStatus = 'idle' | 'loading' | 'stalled' | 'error';
+
+// for convenience, redefined here from instantsearch
+export type TrendingFacetHit = {
+  objectID: string;
+  /**
+   * Recommendation score.
+   */
+  _score: number;
+
+  /**
+   * Facet attribute. To be used in combination with `facetValue`. If specified, only recommendations matching the facet filter will be returned.
+   */
+  attribute: string;
+
+  /**
+   * Facet value. To be used in combination with `facetName`. If specified, only recommendations matching the facet filter will be returned.
+   */
+  value: string;
+};
diff --git a/packages/instantsearch.js/src/__tests__/common-widgets.test.tsx b/packages/instantsearch.js/src/__tests__/common-widgets.test.tsx
index 983279477c..42510b4721 100644
--- a/packages/instantsearch.js/src/__tests__/common-widgets.test.tsx
+++ b/packages/instantsearch.js/src/__tests__/common-widgets.test.tsx
@@ -32,6 +32,7 @@ import {
   poweredBy,
   menuSelect,
   dynamicWidgets,
+  trendingFacets,
 } from '../widgets';
 
 import type { TestOptionsMap, TestSetupsMap } from '@instantsearch/tests';
@@ -550,6 +551,22 @@ const testSetups: TestSetupsMap<TestSuites> = {
       })
       .start();
   },
+  createTrendingFacetsWidgetTests({ instantSearchOptions, widgetParams }) {
+    instantsearch(instantSearchOptions)
+      .addWidgets([
+        trendingFacets({
+          container: document.body.appendChild(document.createElement('div')),
+          ...widgetParams,
+        }),
+      ])
+      .on('error', () => {
+        /*
+         * prevent rethrowing InstantSearch errors, so tests can be asserted.
+         * IRL this isn't needed, as the error doesn't stop execution.
+         */
+      })
+      .start();
+  },
   createLookingSimilarWidgetTests({ instantSearchOptions, widgetParams }) {
     instantsearch(instantSearchOptions)
       .addWidgets([
@@ -644,6 +661,7 @@ const testOptions: TestOptionsMap<TestSuites> = {
   createNumericMenuWidgetTests: undefined,
   createRelatedProductsWidgetTests: undefined,
   createFrequentlyBoughtTogetherWidgetTests: undefined,
+  createTrendingFacetsWidgetTests: undefined,
   createTrendingItemsWidgetTests: undefined,
   createLookingSimilarWidgetTests: undefined,
   createPoweredByWidgetTests: undefined,
diff --git a/packages/instantsearch.js/src/connectors/index.ts b/packages/instantsearch.js/src/connectors/index.ts
index f14dcde625..dbaec3355c 100644
--- a/packages/instantsearch.js/src/connectors/index.ts
+++ b/packages/instantsearch.js/src/connectors/index.ts
@@ -54,3 +54,4 @@ export { default as connectVoiceSearch } from './voice-search/connectVoiceSearch
 export { default as connectRelevantSort } from './relevant-sort/connectRelevantSort';
 export { default as connectFrequentlyBoughtTogether } from './frequently-bought-together/connectFrequentlyBoughtTogether';
 export { default as connectLookingSimilar } from './looking-similar/connectLookingSimilar';
+export { default as connectTrendingFacets } from './trending-facets/connectTrendingFacets';
diff --git a/packages/instantsearch.js/src/connectors/trending-facets/__tests__/connectTrendingFacets.test.ts b/packages/instantsearch.js/src/connectors/trending-facets/__tests__/connectTrendingFacets.test.ts
new file mode 100644
index 0000000000..fc5331dd27
--- /dev/null
+++ b/packages/instantsearch.js/src/connectors/trending-facets/__tests__/connectTrendingFacets.test.ts
@@ -0,0 +1,122 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { createSearchClient } from '@instantsearch/mocks';
+import algoliasearchHelper, { RecommendParameters } from 'algoliasearch-helper';
+
+import {
+  createInitOptions,
+  createRenderOptions,
+} from '../../../../test/createWidget';
+import connectTrendingFacets from '../connectTrendingFacets';
+
+describe('connectTrendingFacets', () => {
+  it('throws without render function', () => {
+    expect(() => {
+      // @ts-expect-error
+      connectTrendingFacets()({});
+    }).toThrowErrorMatchingInlineSnapshot(`
+      "The render function is not valid (received type Undefined).
+
+      See documentation: https://www.algolia.com/doc/api-reference/widgets/trending-facets/js/#connector"
+    `);
+  });
+
+  it('is a widget', () => {
+    const render = jest.fn();
+    const unmount = jest.fn();
+
+    const customTrendingFacets = connectTrendingFacets(render, unmount);
+    const widget = customTrendingFacets({ attribute: 'one' });
+
+    expect(widget).toEqual(
+      expect.objectContaining({
+        $$type: 'ais.trendingFacets',
+        init: expect.any(Function),
+        render: expect.any(Function),
+        dispose: expect.any(Function),
+      })
+    );
+  });
+
+  it('accepts custom parameters', () => {
+    const render = jest.fn();
+    const unmount = jest.fn();
+
+    const customTrendingFacets = connectTrendingFacets<{
+      container: string;
+    }>(render, unmount);
+    const widget = customTrendingFacets({
+      container: '#container',
+      attribute: 'one',
+      limit: 10,
+    });
+
+    expect(widget.$$type).toBe('ais.trendingFacets');
+  });
+
+  it('Renders during init and render', () => {
+    const renderFn = jest.fn();
+    const makeWidget = connectTrendingFacets(renderFn);
+    const widget = makeWidget({ attribute: 'one' });
+
+    // test if widget is not rendered yet at this point
+    expect(renderFn).toHaveBeenCalledTimes(0);
+
+    const helper = algoliasearchHelper(createSearchClient(), '', {});
+    helper.search = jest.fn();
+
+    widget.init(
+      createInitOptions({
+        helper,
+        state: helper.state,
+      })
+    );
+
+    expect(renderFn).toHaveBeenCalledTimes(1);
+    expect(renderFn).toHaveBeenLastCalledWith(
+      expect.objectContaining({ widgetParams: { attribute: 'one' } }),
+      true
+    );
+
+    const renderOptions = createRenderOptions({
+      helper,
+    });
+
+    widget.render(renderOptions);
+
+    expect(renderFn).toHaveBeenCalledTimes(2);
+    expect(renderFn).toHaveBeenLastCalledWith(
+      expect.objectContaining({ widgetParams: { attribute: 'one' } }),
+      false
+    );
+  });
+
+  describe('getWidgetParameters', () => {
+    it('forwards widgetParams to the recommend state', () => {
+      const render = () => {};
+      const makeWidget = connectTrendingFacets(render);
+      const widget = makeWidget({
+        attribute: 'one',
+        limit: 10,
+        threshold: 95,
+      });
+
+      // @ts-expect-error
+      const actual = widget.getWidgetParameters(new RecommendParameters(), {
+        uiState: {},
+      });
+
+      expect(actual).toEqual(
+        new RecommendParameters().addTrendingFacets({
+          // @ts-expect-error
+          $$id: widget.$$id,
+          facetName: 'one',
+          maxRecommendations: 10,
+          threshold: 95,
+        })
+      );
+    });
+  });
+});
diff --git a/packages/instantsearch.js/src/connectors/trending-facets/connectTrendingFacets.ts b/packages/instantsearch.js/src/connectors/trending-facets/connectTrendingFacets.ts
new file mode 100644
index 0000000000..3d86af800b
--- /dev/null
+++ b/packages/instantsearch.js/src/connectors/trending-facets/connectTrendingFacets.ts
@@ -0,0 +1,179 @@
+import {
+  createDocumentationMessageGenerator,
+  checkRendering,
+  noop,
+  addAbsolutePosition,
+  addQueryID,
+} from '../../lib/utils';
+
+import type {
+  Connector,
+  TransformItems,
+  Renderer,
+  Unmounter,
+  UnknownWidgetParams,
+  RecommendResponse,
+  Hit,
+} from '../../types';
+
+const withUsage = createDocumentationMessageGenerator({
+  name: 'trending-facets',
+  connector: true,
+});
+
+export type TrendingFacetHit = {
+  objectID: string;
+  /**
+   * Recommendation score.
+   */
+  _score: number;
+  /**
+   * The attribute of this trending facet.
+   */
+  attribute: string;
+  /**
+   * The value of this trending facet.
+   */
+  value: string;
+};
+
+export type TrendingFacetsRenderState = {
+  /**
+   * The matched recommendations from the Algolia API.
+   */
+  items: Array<Hit<TrendingFacetHit>>;
+};
+
+export type TrendingFacetsConnectorParams = {
+  /**
+   * The facet attribute to get recommendations for.
+   */
+  attribute: string;
+  /**
+   * The number of recommendations to retrieve.
+   */
+  limit?: number;
+  /**
+   * The threshold for the recommendations confidence score (between 0 and 100).
+   */
+  threshold?: number;
+  /**
+   * Function to transform the items passed to the templates.
+   */
+  transformItems?: TransformItems<
+    Hit<TrendingFacetHit>,
+    { results: RecommendResponse<Hit<TrendingFacetHit>> }
+  >;
+};
+
+export type TrendingFacetsWidgetDescription = {
+  $$type: 'ais.trendingFacets';
+  renderState: TrendingFacetsRenderState;
+};
+
+export type TrendingFacetsConnector = Connector<
+  TrendingFacetsWidgetDescription,
+  TrendingFacetsConnectorParams
+>;
+
+export default (function connectTrendingFacets<
+  TWidgetParams extends UnknownWidgetParams
+>(
+  renderFn: Renderer<
+    TrendingFacetsRenderState,
+    TWidgetParams & TrendingFacetsConnectorParams
+  >,
+  unmountFn: Unmounter = noop
+) {
+  checkRendering(renderFn, withUsage());
+
+  return (widgetParams: TWidgetParams & TrendingFacetsConnectorParams) => {
+    const {
+      attribute,
+      limit,
+      threshold,
+      transformItems = ((items) => items) as NonNullable<
+        TrendingFacetsConnectorParams['transformItems']
+      >,
+    } = widgetParams || {};
+
+    return {
+      dependsOn: 'recommend',
+      $$type: 'ais.trendingFacets',
+
+      init(initOptions) {
+        renderFn(
+          {
+            ...this.getWidgetRenderState(initOptions),
+            instantSearchInstance: initOptions.instantSearchInstance,
+          },
+          true
+        );
+      },
+
+      render(renderOptions) {
+        const renderState = this.getWidgetRenderState(renderOptions);
+
+        renderFn(
+          {
+            ...renderState,
+            instantSearchInstance: renderOptions.instantSearchInstance,
+          },
+          false
+        );
+      },
+
+      getRenderState(renderState) {
+        return renderState;
+      },
+
+      getWidgetRenderState({ results }) {
+        if (results === null || results === undefined) {
+          return { items: [], widgetParams };
+        }
+
+        const renamed = results.hits.map((hit) => ({
+          objectID: `${hit.facetName}:${hit.facetValue}`,
+          _score: hit._score,
+          attribute: hit.facetName,
+          value: hit.facetValue,
+        }));
+
+        const itemsWithAbsolutePosition = addAbsolutePosition(renamed, 0, 1);
+
+        const itemsWithAbsolutePositionAndQueryID = addQueryID(
+          itemsWithAbsolutePosition,
+          results.queryID
+        );
+
+        const transformedItems = transformItems(
+          itemsWithAbsolutePositionAndQueryID as unknown as Array<
+            Hit<TrendingFacetHit>
+          >,
+          {
+            results: results as RecommendResponse<Hit<TrendingFacetHit>>,
+          }
+        );
+
+        return {
+          items: transformedItems,
+          widgetParams,
+        };
+      },
+
+      dispose({ recommendState }) {
+        unmountFn();
+        return recommendState.removeParams(this.$$id!);
+      },
+
+      getWidgetParameters(state) {
+        return state.removeParams(this.$$id!).addTrendingFacets({
+          facetName: attribute,
+          maxRecommendations: limit,
+          threshold,
+          $$id: this.$$id!,
+        });
+      },
+    };
+  };
+} satisfies TrendingFacetsConnector);
diff --git a/packages/instantsearch.js/src/widgets/index.ts b/packages/instantsearch.js/src/widgets/index.ts
index 6fd492c520..fbbd93daa3 100644
--- a/packages/instantsearch.js/src/widgets/index.ts
+++ b/packages/instantsearch.js/src/widgets/index.ts
@@ -55,6 +55,7 @@ export { default as sortBy } from './sort-by/sort-by';
 export { default as stats } from './stats/stats';
 export { default as toggleRefinement } from './toggle-refinement/toggle-refinement';
 export { default as trendingItems } from './trending-items/trending-items';
+export { default as trendingFacets } from './trending-facets/trending-facets';
 export { default as voiceSearch } from './voice-search/voice-search';
 export { default as frequentlyBoughtTogether } from './frequently-bought-together/frequently-bought-together';
 export { default as lookingSimilar } from './looking-similar/looking-similar';
diff --git a/packages/instantsearch.js/src/widgets/trending-facets/__tests__/trending-facets.test.tsx b/packages/instantsearch.js/src/widgets/trending-facets/__tests__/trending-facets.test.tsx
new file mode 100644
index 0000000000..8dc1c542da
--- /dev/null
+++ b/packages/instantsearch.js/src/widgets/trending-facets/__tests__/trending-facets.test.tsx
@@ -0,0 +1,918 @@
+/**
+ * @jest-environment jsdom
+ */
+/** @jsx h */
+import { createRecommendSearchClient } from '@instantsearch/mocks/fixtures';
+import { wait } from '@instantsearch/testutils/wait';
+import { h } from 'preact';
+
+import instantsearch from '../../../index.es';
+import { carousel } from '../../../templates';
+import trendingFacets from '../trending-facets';
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+describe('trendingFacets', () => {
+  describe('options', () => {
+    test('throws without a `container`', () => {
+      expect(() => {
+        const searchClient = createRecommendSearchClient();
+
+        const search = instantsearch({
+          indexName: 'indexName',
+          searchClient,
+        });
+
+        search.addWidgets([
+          trendingFacets({
+            // @ts-expect-error
+            container: undefined,
+          }),
+        ]);
+      }).toThrowErrorMatchingInlineSnapshot(`
+        "The \`container\` option is required.
+
+        See documentation: https://www.algolia.com/doc/api-reference/widgets/trending-items/js/"
+      `);
+    });
+
+    test('adds custom CSS classes', async () => {
+      const container = document.createElement('div');
+      const searchClient = createRecommendSearchClient();
+      const options: Parameters<typeof trendingFacets>[0] = {
+        container,
+        attribute: 'attribute',
+        templates: { item: (hit) => hit.value },
+        cssClasses: {
+          root: 'ROOT',
+          emptyRoot: 'EMPTY_ROOT',
+          title: 'TITLE',
+          container: 'CONTAINER',
+          list: 'LIST',
+          item: 'ITEM',
+        },
+      };
+
+      const search = instantsearch({ indexName: 'indexName', searchClient });
+      const trendingFacetsWidget = trendingFacets(options);
+
+      search.addWidgets([trendingFacetsWidget]);
+
+      search.start();
+
+      await wait(0);
+
+      expect(container.querySelector('.ais-TrendingFacets')).toHaveClass(
+        'ROOT'
+      );
+      expect(container.querySelector('.ais-TrendingFacets-title')).toHaveClass(
+        'TITLE'
+      );
+      expect(
+        container.querySelector('.ais-TrendingFacets-container')
+      ).toHaveClass('CONTAINER');
+      expect(container.querySelector('.ais-TrendingFacets-list')).toHaveClass(
+        'LIST'
+      );
+      expect(container.querySelector('.ais-TrendingFacets-item')).toHaveClass(
+        'ITEM'
+      );
+
+      search.removeWidgets([trendingFacetsWidget]);
+
+      search.addWidgets([trendingFacets({ ...options, limit: 0 })]);
+
+      await wait(0);
+
+      expect(container.querySelector('.ais-TrendingFacets')).toHaveClass(
+        'ROOT',
+        'EMPTY_ROOT'
+      );
+    });
+  });
+
+  describe('templates', () => {
+    test('renders default templates', async () => {
+      const container = document.createElement('div');
+      const searchClient = createRecommendSearchClient({
+        fixture: [
+          { attribute: 'value1', value: 'value1' },
+          { attribute: 'value2', value: 'value2' },
+        ],
+      });
+      const options: Parameters<typeof trendingFacets>[0] = {
+        container,
+        attribute: 'attribute',
+        templates: { item: (hit) => hit.value },
+      };
+
+      const search = instantsearch({ indexName: 'indexName', searchClient });
+      const trendingFacetsWidget = trendingFacets(options);
+
+      search.addWidgets([trendingFacetsWidget]);
+
+      // @MAJOR Once Hogan.js and string-based templates are removed,
+      // `search.start()` can be moved to the test body and the following
+      // assertion can go away.
+      expect(async () => {
+        search.start();
+
+        await wait(0);
+      }).not.toWarnDev();
+
+      await wait(0);
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <section
+            class="ais-TrendingFacets"
+          >
+            <h3
+              class="ais-TrendingFacets-title"
+            >
+              Trending facets
+            </h3>
+            <div
+              class="ais-TrendingFacets-container"
+            >
+              <ol
+                class="ais-TrendingFacets-list"
+              >
+                <li
+                  class="ais-TrendingFacets-item"
+                >
+                  undefined
+                </li>
+                <li
+                  class="ais-TrendingFacets-item"
+                >
+                  undefined
+                </li>
+              </ol>
+            </div>
+          </section>
+        </div>
+      `);
+
+      search.removeWidgets([trendingFacetsWidget]);
+
+      search.addWidgets([trendingFacets({ ...options, limit: 0 })]);
+
+      await wait(0);
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <section
+            class="ais-TrendingFacets ais-TrendingFacets--empty"
+          >
+            No results
+          </section>
+        </div>
+      `);
+    });
+
+    test('renders with templates using `html`', async () => {
+      const container = document.createElement('div');
+      const searchClient = createRecommendSearchClient({
+        fixture: [
+          { facetName: 'attr', facetValue: 'value1' },
+          { facetName: 'attr', facetValue: 'value2' },
+        ],
+      });
+      const options: Parameters<typeof trendingFacets>[0] = {
+        container,
+        attribute: 'attribute',
+        templates: {
+          header({ items, cssClasses }, { html }) {
+            return html`<h4 class="${cssClasses.title}">
+              Trending facets (${items.length})
+            </h4>`;
+          },
+          item(item, { html }) {
+            return html`<p>${item.attribute}: ${item.value}</p>`;
+          },
+          empty(_, { html }) {
+            return html`<p>No recommendations.</p>`;
+          },
+        },
+      };
+
+      const search = instantsearch({ indexName: 'indexName', searchClient });
+      const trendingFacetsWidget = trendingFacets(options);
+
+      search.addWidgets([trendingFacetsWidget]);
+
+      search.start();
+
+      await wait(0);
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <section
+            class="ais-TrendingFacets"
+          >
+            <h4
+              class="ais-TrendingFacets-title"
+            >
+              Trending facets (
+              2
+              )
+            </h4>
+            <div
+              class="ais-TrendingFacets-container"
+            >
+              <ol
+                class="ais-TrendingFacets-list"
+              >
+                <li
+                  class="ais-TrendingFacets-item"
+                >
+                  <p>
+                    attr
+                    : 
+                    value1
+                  </p>
+                </li>
+                <li
+                  class="ais-TrendingFacets-item"
+                >
+                  <p>
+                    attr
+                    : 
+                    value2
+                  </p>
+                </li>
+              </ol>
+            </div>
+          </section>
+        </div>
+      `);
+
+      search.removeWidgets([trendingFacetsWidget]);
+
+      search.addWidgets([trendingFacets({ ...options, limit: 0 })]);
+
+      await wait(0);
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <section
+            class="ais-TrendingFacets ais-TrendingFacets--empty"
+          >
+            <p>
+              No recommendations.
+            </p>
+          </section>
+        </div>
+      `);
+    });
+
+    test('renders with a custom layout using `html`', async () => {
+      const container = document.createElement('div');
+      const searchClient = createRecommendSearchClient({
+        fixture: [
+          { facetName: 'attr', facetValue: 'value1' },
+          { facetName: 'attr', facetValue: 'value2' },
+        ],
+      });
+      const options: Parameters<typeof trendingFacets>[0] = {
+        container,
+        attribute: 'attribute',
+        templates: {
+          layout({ items }, { html }) {
+            return html`<ul>
+              ${items.map((item) => html`<li><p>${item.objectID}</p></li>`)}
+            </ul>`;
+          },
+        },
+      };
+
+      const search = instantsearch({ indexName: 'indexName', searchClient });
+      const widget = trendingFacets(options);
+
+      search.addWidgets([widget]);
+      search.start();
+
+      await wait(0);
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <section
+            class="ais-TrendingFacets"
+          >
+            <h3
+              class="ais-TrendingFacets-title"
+            >
+              Trending facets
+            </h3>
+            <ul>
+              <li>
+                <p>
+                  attr:value1
+                </p>
+              </li>
+              <li>
+                <p>
+                  attr:value2
+                </p>
+              </li>
+            </ul>
+          </section>
+        </div>
+      `);
+    });
+
+    test('renders with a carousel layout without options using `html`', async () => {
+      const container = document.createElement('div');
+      const searchClient = createRecommendSearchClient({
+        fixture: [
+          { facetName: 'attr', facetValue: 'value1' },
+          { facetName: 'attr', facetValue: 'value2' },
+        ],
+      });
+      const options: Parameters<typeof trendingFacets>[0] = {
+        container,
+        attribute: 'attribute',
+        templates: {
+          item(hit, { html }) {
+            return html`<p>${hit.objectID}</p>`;
+          },
+          layout: carousel({
+            cssClasses: {
+              root: 'ROOT',
+              list: 'LIST',
+              item: 'ITEM',
+              navigation: 'NAVIGATION',
+              navigationNext: 'NAVIGATION_NEXT',
+              navigationPrevious: 'NAVIGATION_PREVIOUS',
+            },
+            templates: {
+              previous({ html }) {
+                return html`<p>Previous</p>`;
+              },
+              next({ html }) {
+                return html`<p>Next</p>`;
+              },
+            },
+          }),
+        },
+      };
+
+      const search = instantsearch({ indexName: 'indexName', searchClient });
+      const widget = trendingFacets(options);
+
+      search.addWidgets([widget]);
+      search.start();
+
+      await wait(0);
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <section
+            class="ais-TrendingFacets"
+          >
+            <h3
+              class="ais-TrendingFacets-title"
+            >
+              Trending facets
+            </h3>
+            <div
+              class="ais-Carousel ROOT"
+            >
+              <button
+                aria-controls="ais-Carousel-0"
+                aria-label="Previous"
+                class="ais-Carousel-navigation NAVIGATION ais-Carousel-navigation--previous NAVIGATION_PREVIOUS"
+                hidden=""
+                title="Previous"
+              >
+                <p>
+                  Previous
+                </p>
+              </button>
+              <ol
+                aria-label="Items"
+                aria-live="polite"
+                aria-roledescription="carousel"
+                class="ais-Carousel-list LIST ais-TrendingFacets-list"
+                id="ais-Carousel-0"
+                tabindex="0"
+              >
+                <li
+                  aria-label="1 of 2"
+                  aria-roledescription="slide"
+                  class="ais-Carousel-item ITEM ais-TrendingFacets-item"
+                >
+                  <p>
+                    attr:value1
+                  </p>
+                </li>
+                <li
+                  aria-label="2 of 2"
+                  aria-roledescription="slide"
+                  class="ais-Carousel-item ITEM ais-TrendingFacets-item"
+                >
+                  <p>
+                    attr:value2
+                  </p>
+                </li>
+              </ol>
+              <button
+                aria-controls="ais-Carousel-0"
+                aria-label="Next"
+                class="ais-Carousel-navigation NAVIGATION ais-Carousel-navigation--next NAVIGATION_NEXT"
+                title="Next"
+              >
+                <p>
+                  Next
+                </p>
+              </button>
+            </div>
+          </section>
+        </div>
+      `);
+    });
+
+    test('renders with a carousel layout with options using `html`', async () => {
+      const container = document.createElement('div');
+      const searchClient = createRecommendSearchClient({
+        fixture: [
+          { facetName: 'attr', facetValue: 'value1' },
+          { facetName: 'attr', facetValue: 'value2' },
+        ],
+      });
+      const options: Parameters<typeof trendingFacets>[0] = {
+        container,
+        attribute: 'attribute',
+        templates: {
+          item(hit, { html }) {
+            return html`<p>${hit.objectID}</p>`;
+          },
+          layout: carousel({
+            cssClasses: {
+              root: 'ROOT',
+              list: 'LIST',
+              item: 'ITEM',
+              navigation: 'NAVIGATION',
+              navigationNext: 'NAVIGATION_NEXT',
+              navigationPrevious: 'NAVIGATION_PREVIOUS',
+            },
+            templates: {
+              previous({ html }) {
+                return html`<p>Previous</p>`;
+              },
+              next({ html }) {
+                return html`<p>Next</p>`;
+              },
+            },
+          }),
+        },
+      };
+
+      const search = instantsearch({ indexName: 'indexName', searchClient });
+      const widget = trendingFacets(options);
+
+      search.addWidgets([widget]);
+      search.start();
+
+      await wait(0);
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <section
+            class="ais-TrendingFacets"
+          >
+            <h3
+              class="ais-TrendingFacets-title"
+            >
+              Trending facets
+            </h3>
+            <div
+              class="ais-Carousel ROOT"
+            >
+              <button
+                aria-controls="ais-Carousel-1"
+                aria-label="Previous"
+                class="ais-Carousel-navigation NAVIGATION ais-Carousel-navigation--previous NAVIGATION_PREVIOUS"
+                hidden=""
+                title="Previous"
+              >
+                <p>
+                  Previous
+                </p>
+              </button>
+              <ol
+                aria-label="Items"
+                aria-live="polite"
+                aria-roledescription="carousel"
+                class="ais-Carousel-list LIST ais-TrendingFacets-list"
+                id="ais-Carousel-1"
+                tabindex="0"
+              >
+                <li
+                  aria-label="1 of 2"
+                  aria-roledescription="slide"
+                  class="ais-Carousel-item ITEM ais-TrendingFacets-item"
+                >
+                  <p>
+                    attr:value1
+                  </p>
+                </li>
+                <li
+                  aria-label="2 of 2"
+                  aria-roledescription="slide"
+                  class="ais-Carousel-item ITEM ais-TrendingFacets-item"
+                >
+                  <p>
+                    attr:value2
+                  </p>
+                </li>
+              </ol>
+              <button
+                aria-controls="ais-Carousel-1"
+                aria-label="Next"
+                class="ais-Carousel-navigation NAVIGATION ais-Carousel-navigation--next NAVIGATION_NEXT"
+                title="Next"
+              >
+                <p>
+                  Next
+                </p>
+              </button>
+            </div>
+          </section>
+        </div>
+      `);
+    });
+
+    test('renders with templates using JSX', async () => {
+      const container = document.createElement('div');
+      const searchClient = createRecommendSearchClient({
+        fixture: [
+          { facetName: 'attr', facetValue: 'value1' },
+          { facetName: 'attr', facetValue: 'value2' },
+        ],
+      });
+      const options: Parameters<typeof trendingFacets>[0] = {
+        container,
+        attribute: 'attribute',
+        templates: {
+          header({ items, cssClasses }) {
+            return (
+              <h4 className={cssClasses.title}>
+                Trending facets ({items.length})
+              </h4>
+            );
+          },
+          item(item) {
+            return <p>{item.objectID}</p>;
+          },
+          empty() {
+            return <p>No recommendations.</p>;
+          },
+        },
+      };
+
+      const search = instantsearch({ indexName: 'indexName', searchClient });
+      const trendingFacetsWidget = trendingFacets(options);
+
+      search.addWidgets([trendingFacetsWidget]);
+
+      search.start();
+
+      await wait(0);
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <section
+            class="ais-TrendingFacets"
+          >
+            <h4
+              class="ais-TrendingFacets-title"
+            >
+              Trending facets (
+              2
+              )
+            </h4>
+            <div
+              class="ais-TrendingFacets-container"
+            >
+              <ol
+                class="ais-TrendingFacets-list"
+              >
+                <li
+                  class="ais-TrendingFacets-item"
+                >
+                  <p>
+                    attr:value1
+                  </p>
+                </li>
+                <li
+                  class="ais-TrendingFacets-item"
+                >
+                  <p>
+                    attr:value2
+                  </p>
+                </li>
+              </ol>
+            </div>
+          </section>
+        </div>
+      `);
+
+      search.removeWidgets([trendingFacetsWidget]);
+
+      search.addWidgets([trendingFacets({ ...options, limit: 0 })]);
+
+      await wait(0);
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <section
+            class="ais-TrendingFacets ais-TrendingFacets--empty"
+          >
+            <p>
+              No recommendations.
+            </p>
+          </section>
+        </div>
+      `);
+    });
+
+    test('renders with a custom layout using JSX', async () => {
+      const container = document.createElement('div');
+      const searchClient = createRecommendSearchClient({
+        fixture: [
+          { objectID: '1', value: '1' },
+          { objectID: '2', value: '2' },
+        ],
+      });
+      const options: Parameters<typeof trendingFacets>[0] = {
+        container,
+        attribute: 'attribute',
+        templates: {
+          layout({ items }) {
+            return (
+              <ul>
+                {items.map((item) => (
+                  <li key={item.value}>
+                    <p>{item.value}</p>
+                  </li>
+                ))}
+              </ul>
+            );
+          },
+        },
+      };
+
+      const search = instantsearch({ indexName: 'indexName', searchClient });
+      const widget = trendingFacets(options);
+
+      search.addWidgets([widget]);
+      search.start();
+
+      await wait(0);
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <section
+            class="ais-TrendingFacets"
+          >
+            <h3
+              class="ais-TrendingFacets-title"
+            >
+              Trending facets
+            </h3>
+            <ul>
+              <li>
+                <p />
+              </li>
+              <li>
+                <p />
+              </li>
+            </ul>
+          </section>
+        </div>
+      `);
+    });
+
+    test('renders with a carousel layout without options using JSX', async () => {
+      const container = document.createElement('div');
+      const searchClient = createRecommendSearchClient({
+        fixture: [
+          { objectID: '1', value: '1' },
+          { objectID: '2', value: '2' },
+        ],
+      });
+      const options: Parameters<typeof trendingFacets>[0] = {
+        container,
+        attribute: 'attribute',
+        templates: {
+          item(hit) {
+            return <p>{hit.value}</p>;
+          },
+          layout: carousel({
+            cssClasses: {
+              root: 'ROOT',
+              list: 'LIST',
+              item: 'ITEM',
+              navigation: 'NAVIGATION',
+              navigationNext: 'NAVIGATION_NEXT',
+              navigationPrevious: 'NAVIGATION_PREVIOUS',
+            },
+            templates: {
+              previous() {
+                return <p>Previous</p>;
+              },
+              next() {
+                return <p>Next</p>;
+              },
+            },
+          }),
+        },
+      };
+
+      const search = instantsearch({ indexName: 'indexName', searchClient });
+      const widget = trendingFacets(options);
+
+      search.addWidgets([widget]);
+      search.start();
+
+      await wait(0);
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <section
+            class="ais-TrendingFacets"
+          >
+            <h3
+              class="ais-TrendingFacets-title"
+            >
+              Trending facets
+            </h3>
+            <div
+              class="ais-Carousel ROOT"
+            >
+              <button
+                aria-controls="ais-Carousel-2"
+                aria-label="Previous"
+                class="ais-Carousel-navigation NAVIGATION ais-Carousel-navigation--previous NAVIGATION_PREVIOUS"
+                hidden=""
+                title="Previous"
+              >
+                <p>
+                  Previous
+                </p>
+              </button>
+              <ol
+                aria-label="Items"
+                aria-live="polite"
+                aria-roledescription="carousel"
+                class="ais-Carousel-list LIST ais-TrendingFacets-list"
+                id="ais-Carousel-2"
+                tabindex="0"
+              >
+                <li
+                  aria-label="1 of 2"
+                  aria-roledescription="slide"
+                  class="ais-Carousel-item ITEM ais-TrendingFacets-item"
+                >
+                  <p />
+                </li>
+                <li
+                  aria-label="2 of 2"
+                  aria-roledescription="slide"
+                  class="ais-Carousel-item ITEM ais-TrendingFacets-item"
+                >
+                  <p />
+                </li>
+              </ol>
+              <button
+                aria-controls="ais-Carousel-2"
+                aria-label="Next"
+                class="ais-Carousel-navigation NAVIGATION ais-Carousel-navigation--next NAVIGATION_NEXT"
+                title="Next"
+              >
+                <p>
+                  Next
+                </p>
+              </button>
+            </div>
+          </section>
+        </div>
+      `);
+    });
+
+    test('renders with a carousel layout with options using JSX', async () => {
+      const container = document.createElement('div');
+      const searchClient = createRecommendSearchClient({
+        fixture: [
+          { facetName: 'attr', facetValue: 'value1' },
+          { facetName: 'attr', facetValue: 'value2' },
+        ],
+      });
+      const options: Parameters<typeof trendingFacets>[0] = {
+        container,
+        attribute: 'attribute',
+        templates: {
+          item(hit) {
+            return <p>{hit.objectID}</p>;
+          },
+          layout: carousel({
+            cssClasses: {
+              root: 'ROOT',
+              list: 'LIST',
+              item: 'ITEM',
+              navigation: 'NAVIGATION',
+              navigationNext: 'NAVIGATION_NEXT',
+              navigationPrevious: 'NAVIGATION_PREVIOUS',
+            },
+            templates: {
+              previous() {
+                return <p>Previous</p>;
+              },
+              next() {
+                return <p>Next</p>;
+              },
+            },
+          }),
+        },
+      };
+
+      const search = instantsearch({ indexName: 'indexName', searchClient });
+      const widget = trendingFacets(options);
+
+      search.addWidgets([widget]);
+      search.start();
+
+      await wait(0);
+
+      expect(container).toMatchInlineSnapshot(`
+        <div>
+          <section
+            class="ais-TrendingFacets"
+          >
+            <h3
+              class="ais-TrendingFacets-title"
+            >
+              Trending facets
+            </h3>
+            <div
+              class="ais-Carousel ROOT"
+            >
+              <button
+                aria-controls="ais-Carousel-3"
+                aria-label="Previous"
+                class="ais-Carousel-navigation NAVIGATION ais-Carousel-navigation--previous NAVIGATION_PREVIOUS"
+                hidden=""
+                title="Previous"
+              >
+                <p>
+                  Previous
+                </p>
+              </button>
+              <ol
+                aria-label="Items"
+                aria-live="polite"
+                aria-roledescription="carousel"
+                class="ais-Carousel-list LIST ais-TrendingFacets-list"
+                id="ais-Carousel-3"
+                tabindex="0"
+              >
+                <li
+                  aria-label="1 of 2"
+                  aria-roledescription="slide"
+                  class="ais-Carousel-item ITEM ais-TrendingFacets-item"
+                >
+                  <p>
+                    attr:value1
+                  </p>
+                </li>
+                <li
+                  aria-label="2 of 2"
+                  aria-roledescription="slide"
+                  class="ais-Carousel-item ITEM ais-TrendingFacets-item"
+                >
+                  <p>
+                    attr:value2
+                  </p>
+                </li>
+              </ol>
+              <button
+                aria-controls="ais-Carousel-3"
+                aria-label="Next"
+                class="ais-Carousel-navigation NAVIGATION ais-Carousel-navigation--next NAVIGATION_NEXT"
+                title="Next"
+              >
+                <p>
+                  Next
+                </p>
+              </button>
+            </div>
+          </section>
+        </div>
+      `);
+    });
+  });
+});
diff --git a/packages/instantsearch.js/src/widgets/trending-facets/trending-facets.tsx b/packages/instantsearch.js/src/widgets/trending-facets/trending-facets.tsx
new file mode 100644
index 0000000000..bc705ecc40
--- /dev/null
+++ b/packages/instantsearch.js/src/widgets/trending-facets/trending-facets.tsx
@@ -0,0 +1,274 @@
+/** @jsx h */
+
+import { createTrendingFacetsComponent } from 'instantsearch-ui-components';
+import { Fragment, h, render } from 'preact';
+
+import TemplateComponent from '../../components/Template/Template';
+import connectTrendingFacets from '../../connectors/trending-facets/connectTrendingFacets';
+import { prepareTemplateProps } from '../../lib/templating';
+import {
+  getContainerNode,
+  createDocumentationMessageGenerator,
+} from '../../lib/utils';
+
+import type {
+  TrendingFacetsWidgetDescription,
+  TrendingFacetsConnectorParams,
+  TrendingFacetsRenderState,
+  TrendingFacetHit,
+} from '../../connectors/trending-facets/connectTrendingFacets';
+import type { PreparedTemplateProps } from '../../lib/templating';
+import type {
+  Template,
+  WidgetFactory,
+  Renderer,
+  RecommendResponse,
+  TemplateWithBindEvent,
+  Hit,
+} from '../../types';
+import type {
+  RecommendClassNames,
+  TrendingFacetsProps as TrendingFacetsUiProps,
+} from 'instantsearch-ui-components';
+
+const withUsage = createDocumentationMessageGenerator({
+  name: 'trending-items',
+});
+
+const TrendingFacets = createTrendingFacetsComponent({
+  createElement: h,
+  Fragment,
+});
+
+type CreateRendererProps = {
+  containerNode: HTMLElement;
+  cssClasses: TrendingFacetsCSSClasses;
+  renderState: {
+    templateProps?: PreparedTemplateProps<TrendingFacetsTemplates>;
+  };
+  templates: TrendingFacetsTemplates;
+};
+
+function createRenderer({
+  renderState,
+  cssClasses,
+  containerNode,
+  templates,
+}: CreateRendererProps): Renderer<
+  TrendingFacetsRenderState,
+  Partial<TrendingFacetsWidgetParams>
+> {
+  return function renderer(
+    { items, results, instantSearchInstance },
+    isFirstRendering
+  ) {
+    if (isFirstRendering) {
+      renderState.templateProps = prepareTemplateProps({
+        defaultTemplates: {} as unknown as Required<TrendingFacetsTemplates>,
+        templatesConfig: instantSearchInstance.templatesConfig,
+        templates,
+      });
+
+      return;
+    }
+
+    const headerComponent = (
+      templates.header
+        ? (data) => (
+            <TemplateComponent
+              {...renderState.templateProps}
+              templateKey="header"
+              rootTagName="fragment"
+              data={{
+                cssClasses: data.classNames,
+                items: data.items,
+              }}
+            />
+          )
+        : undefined
+    ) as TrendingFacetsUiProps['headerComponent'];
+
+    const itemComponent: TrendingFacetsUiProps['itemComponent'] = templates.item
+      ? ({ item, ...rootProps }) => {
+          return (
+            <TemplateComponent
+              {...renderState.templateProps}
+              templateKey="item"
+              rootTagName="fragment"
+              data={item}
+              rootProps={{ ...rootProps }}
+            />
+          );
+        }
+      : () => <div></div>;
+
+    const emptyComponent = (
+      templates.empty
+        ? () => (
+            <TemplateComponent
+              {...renderState.templateProps}
+              templateKey="empty"
+              rootTagName="fragment"
+              data={results}
+            />
+          )
+        : undefined
+    ) as TrendingFacetsUiProps['emptyComponent'];
+
+    const layoutComponent = (
+      templates.layout
+        ? (data) => (
+            <TemplateComponent
+              {...renderState.templateProps}
+              templateKey="layout"
+              rootTagName="fragment"
+              data={{
+                items: data.items,
+                templates: {
+                  item: templates.item
+                    ? ({ item }: { item: Hit<TrendingFacetHit> }) => (
+                        <TemplateComponent
+                          {...renderState.templateProps}
+                          templateKey="item"
+                          rootTagName="fragment"
+                          data={item}
+                        />
+                      )
+                    : undefined,
+                },
+                cssClasses: {
+                  list: data.classNames.list,
+                  item: data.classNames.item,
+                },
+              }}
+            />
+          )
+        : undefined
+    ) as TrendingFacetsUiProps['layout'];
+
+    render(
+      <TrendingFacets
+        items={items}
+        classNames={cssClasses}
+        headerComponent={headerComponent}
+        itemComponent={itemComponent}
+        emptyComponent={emptyComponent}
+        layout={layoutComponent}
+        status={instantSearchInstance.status}
+        sendEvent={() => {}}
+      />,
+      containerNode
+    );
+  };
+}
+
+export type TrendingFacetsCSSClasses = Partial<RecommendClassNames>;
+
+export type TrendingFacetsTemplates = Partial<{
+  /**
+   * Template to use when there are no results.
+   */
+  empty: Template<RecommendResponse<Hit<TrendingFacetHit>>>;
+
+  /**
+   * Template to use for the header of the widget.
+   */
+  header: Template<{
+    items: Array<Hit<TrendingFacetHit>>;
+    cssClasses: RecommendClassNames;
+  }>;
+}> &
+  (
+    | {
+        /**
+         * Template to use to wrap all items.
+         */
+        layout: Template<{
+          items: Array<Hit<TrendingFacetHit>>;
+          templates: {
+            item: TrendingFacetsUiProps<Hit<TrendingFacetHit>>['itemComponent'];
+          };
+          cssClasses: Pick<TrendingFacetsCSSClasses, 'list' | 'item'>;
+        }>;
+        item?: TemplateWithBindEvent<Hit<TrendingFacetHit>>;
+      }
+    | {
+        /**
+         * Template to use to wrap all items.
+         */
+        layout?: Template<{
+          items: Array<Hit<TrendingFacetHit>>;
+          templates: {
+            item: TrendingFacetsUiProps<Hit<TrendingFacetHit>>['itemComponent'];
+          };
+          cssClasses: Pick<TrendingFacetsCSSClasses, 'list' | 'item'>;
+        }>;
+        item: TemplateWithBindEvent<Hit<TrendingFacetHit>>;
+      }
+  );
+
+type TrendingFacetsWidgetParams = {
+  /**
+   * CSS selector or `HTMLElement` to insert the widget into.
+   */
+  container: string | HTMLElement;
+
+  /**
+   * Templates to customize the widget.
+   */
+  templates: TrendingFacetsTemplates;
+
+  /**
+   * CSS classes to add to the widget elements.
+   */
+  cssClasses?: TrendingFacetsCSSClasses;
+};
+
+export type TrendingFacetsWidget = WidgetFactory<
+  TrendingFacetsWidgetDescription & {
+    $$widgetType: 'ais.trendingFacets';
+  },
+  TrendingFacetsConnectorParams,
+  TrendingFacetsWidgetParams
+>;
+
+export default (function trendingFacets(
+  widgetParams: TrendingFacetsWidgetParams & TrendingFacetsConnectorParams
+) {
+  const {
+    container,
+    attribute,
+    limit,
+    threshold,
+    transformItems,
+    templates,
+    cssClasses = {},
+  } = widgetParams || {};
+
+  if (!container) {
+    throw new Error(withUsage('The `container` option is required.'));
+  }
+
+  const containerNode = getContainerNode(container);
+
+  const specializedRenderer = createRenderer({
+    containerNode,
+    cssClasses,
+    renderState: {},
+    templates,
+  });
+
+  const makeWidget = connectTrendingFacets(specializedRenderer, () =>
+    render(null, containerNode)
+  );
+
+  return {
+    ...makeWidget({
+      attribute,
+      limit,
+      threshold,
+      transformItems,
+    }),
+    $$widgetType: 'ais.trendingFacets',
+  };
+} satisfies TrendingFacetsWidget);
diff --git a/packages/react-instantsearch-core/src/connectors/__tests__/useTrendingFacets.test.tsx b/packages/react-instantsearch-core/src/connectors/__tests__/useTrendingFacets.test.tsx
new file mode 100644
index 0000000000..97dc4c5e0d
--- /dev/null
+++ b/packages/react-instantsearch-core/src/connectors/__tests__/useTrendingFacets.test.tsx
@@ -0,0 +1,54 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { createRecommendSearchClient } from '@instantsearch/mocks/fixtures';
+import { createInstantSearchTestWrapper } from '@instantsearch/testutils';
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { useTrendingFacets } from '../useTrendingFacets';
+
+describe('useTrendingFacets', () => {
+  test('returns the connector render state', async () => {
+    const wrapper = createInstantSearchTestWrapper({
+      searchClient: createRecommendSearchClient({
+        fixture: [
+          { facetName: 'attr1', facetValue: 'val1' },
+          { facetName: 'attr2', facetValue: 'val2' },
+        ],
+      }),
+    });
+    const { result } = renderHook(
+      () => useTrendingFacets({ attribute: 'one' }),
+      {
+        wrapper,
+      }
+    );
+
+    // Initial render state from manual `getWidgetRenderState`
+    expect(result.current).toEqual({
+      items: [],
+    });
+
+    await waitFor(() => {
+      expect(result.current).toEqual({
+        items: expect.arrayContaining([
+          {
+            __position: 1,
+            _score: undefined,
+            attribute: 'attr1',
+            objectID: 'attr1:val1',
+            value: 'val1',
+          },
+          {
+            __position: 2,
+            _score: undefined,
+            attribute: 'attr2',
+            objectID: 'attr2:val2',
+            value: 'val2',
+          },
+        ]),
+      });
+    });
+  });
+});
diff --git a/packages/react-instantsearch-core/src/connectors/useTrendingFacets.ts b/packages/react-instantsearch-core/src/connectors/useTrendingFacets.ts
new file mode 100644
index 0000000000..8c3d6d50da
--- /dev/null
+++ b/packages/react-instantsearch-core/src/connectors/useTrendingFacets.ts
@@ -0,0 +1,26 @@
+import connectTrendingFacets from 'instantsearch.js/es/connectors/trending-facets/connectTrendingFacets';
+
+import { useConnector } from '../hooks/useConnector';
+
+import type { AdditionalWidgetProperties } from '../hooks/useConnector';
+import type {
+  TrendingFacetsConnector,
+  TrendingFacetsConnectorParams,
+  TrendingFacetsWidgetDescription,
+} from 'instantsearch.js/es/connectors/trending-facets/connectTrendingFacets';
+
+export type UseTrendingFacetsProps = TrendingFacetsConnectorParams;
+
+export function useTrendingFacets(
+  props?: UseTrendingFacetsProps,
+  additionalWidgetProperties?: AdditionalWidgetProperties
+) {
+  return useConnector<
+    TrendingFacetsConnectorParams,
+    TrendingFacetsWidgetDescription
+  >(
+    connectTrendingFacets as TrendingFacetsConnector,
+    props,
+    additionalWidgetProperties
+  );
+}
diff --git a/packages/react-instantsearch-core/src/index.ts b/packages/react-instantsearch-core/src/index.ts
index db206dfe8a..6caebddb29 100644
--- a/packages/react-instantsearch-core/src/index.ts
+++ b/packages/react-instantsearch-core/src/index.ts
@@ -29,6 +29,7 @@ export * from './connectors/useSortBy';
 export * from './connectors/useStats';
 export * from './connectors/useToggleRefinement';
 export * from './connectors/useTrendingItems';
+export * from './connectors/useTrendingFacets';
 export * from './connectors/useLookingSimilar';
 export * from './hooks/useConnector';
 export * from './hooks/useInstantSearch';
diff --git a/packages/react-instantsearch/src/__tests__/common-widgets.test.tsx b/packages/react-instantsearch/src/__tests__/common-widgets.test.tsx
index 65a8b8797d..cb52138162 100644
--- a/packages/react-instantsearch/src/__tests__/common-widgets.test.tsx
+++ b/packages/react-instantsearch/src/__tests__/common-widgets.test.tsx
@@ -27,6 +27,7 @@ import {
   Stats,
   RelatedProducts,
   FrequentlyBoughtTogether,
+  TrendingFacets,
   TrendingItems,
   LookingSimilar,
   PoweredBy,
@@ -34,8 +35,10 @@ import {
 } from '..';
 
 import type { TestOptionsMap, TestSetupsMap } from '@instantsearch/tests';
+import type { TrendingFacetHit } from 'instantsearch-ui-components';
 import type { Hit } from 'instantsearch.js';
 import type { SendEventForHits } from 'instantsearch.js/es/lib/utils';
+import type { ComponentProps } from 'react';
 
 type TestSuites = typeof suites;
 const testSuites: TestSuites = suites;
@@ -338,6 +341,22 @@ const testSetups: TestSetupsMap<TestSuites> = {
       </InstantSearch>
     );
   },
+  createTrendingFacetsWidgetTests({ instantSearchOptions, widgetParams }) {
+    const { templates, ...params } = widgetParams;
+    const itemComponent: ComponentProps<
+      typeof TrendingFacets
+    >['itemComponent'] = ({ item }: { item: Hit<TrendingFacetHit> }) =>
+      typeof widgetParams.templates.item === 'function'
+        ? (widgetParams.templates.item(item, {} as any) as JSX.Element)
+        : ('Error: itemComponent should be a function' as unknown as JSX.Element);
+
+    render(
+      <InstantSearch {...instantSearchOptions}>
+        <TrendingFacets itemComponent={itemComponent} {...params} />
+        <GlobalErrorSwallower />
+      </InstantSearch>
+    );
+  },
   createTrendingItemsWidgetTests({ instantSearchOptions, widgetParams }) {
     const { facetName, facetValue, ...params } = widgetParams;
     const facetParams =
@@ -425,6 +444,7 @@ const testOptions: TestOptionsMap<TestSuites> = {
   },
   createRelatedProductsWidgetTests: { act },
   createFrequentlyBoughtTogetherWidgetTests: { act },
+  createTrendingFacetsWidgetTests: { act },
   createTrendingItemsWidgetTests: { act },
   createLookingSimilarWidgetTests: { act },
   createPoweredByWidgetTests: { act },
diff --git a/packages/react-instantsearch/src/widgets/TrendingFacets.tsx b/packages/react-instantsearch/src/widgets/TrendingFacets.tsx
new file mode 100644
index 0000000000..fbc1d42a1e
--- /dev/null
+++ b/packages/react-instantsearch/src/widgets/TrendingFacets.tsx
@@ -0,0 +1,82 @@
+import { createTrendingFacetsComponent } from 'instantsearch-ui-components';
+import React, { createElement, Fragment } from 'react';
+import { useInstantSearch, useTrendingFacets } from 'react-instantsearch-core';
+
+import type {
+  TrendingFacetsProps as TrendingFacetsUiComponentProps,
+  Pragma,
+} from 'instantsearch-ui-components';
+import type { UseTrendingFacetsProps } from 'react-instantsearch-core';
+
+type UiProps = Pick<
+  TrendingFacetsUiComponentProps,
+  | 'items'
+  | 'itemComponent'
+  | 'headerComponent'
+  | 'emptyComponent'
+  | 'layout'
+  | 'status'
+  | 'sendEvent'
+>;
+
+export type TrendingFacetsProps = Omit<
+  TrendingFacetsUiComponentProps,
+  keyof UiProps
+> &
+  UseTrendingFacetsProps & {
+    itemComponent: TrendingFacetsUiComponentProps['itemComponent'];
+    headerComponent?: TrendingFacetsUiComponentProps['headerComponent'];
+    emptyComponent?: TrendingFacetsUiComponentProps['emptyComponent'];
+    layoutComponent?: TrendingFacetsUiComponentProps['layout'];
+  };
+
+const TrendingFacetsUiComponent = createTrendingFacetsComponent({
+  createElement: createElement as Pragma,
+  Fragment,
+});
+
+export function TrendingFacets({
+  attribute,
+  limit,
+  threshold,
+  transformItems,
+  itemComponent,
+  headerComponent,
+  emptyComponent,
+  layoutComponent,
+  ...props
+}: TrendingFacetsProps) {
+  const { status } = useInstantSearch();
+  const { items } = useTrendingFacets(
+    {
+      attribute,
+      limit,
+      threshold,
+      transformItems,
+    },
+    { $$widgetType: 'ais.trendingFacets' }
+  );
+
+  const layout: typeof layoutComponent = layoutComponent
+    ? (layoutProps) =>
+        layoutComponent({
+          ...layoutProps,
+          classNames: {
+            list: layoutProps.classNames.list,
+            item: layoutProps.classNames.item,
+          },
+        })
+    : undefined;
+
+  const uiProps: UiProps = {
+    items,
+    itemComponent,
+    headerComponent,
+    emptyComponent,
+    layout,
+    status,
+    sendEvent: () => {},
+  };
+
+  return <TrendingFacetsUiComponent {...props} {...uiProps} />;
+}
diff --git a/packages/react-instantsearch/src/widgets/__tests__/TrendingFacets.test.tsx b/packages/react-instantsearch/src/widgets/__tests__/TrendingFacets.test.tsx
new file mode 100644
index 0000000000..a530f9a42d
--- /dev/null
+++ b/packages/react-instantsearch/src/widgets/__tests__/TrendingFacets.test.tsx
@@ -0,0 +1,360 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { createRecommendSearchClient } from '@instantsearch/mocks/fixtures';
+import { InstantSearchTestWrapper } from '@instantsearch/testutils';
+import { render, waitFor } from '@testing-library/react';
+import { cx } from 'instantsearch-ui-components';
+import React from 'react';
+
+import { Carousel } from '../../components/Carousel';
+import { TrendingFacets } from '../TrendingFacets';
+
+describe('TrendingFacets', () => {
+  test('renders with translations', async () => {
+    const client = createRecommendSearchClient({
+      fixture: [
+        { facetName: 'facet1', facetValue: '1' },
+        { facetName: 'facet2', facetValue: '2' },
+      ],
+    });
+    const { container } = render(
+      <InstantSearchTestWrapper searchClient={client}>
+        <TrendingFacets
+          attribute="attr"
+          translations={{ title: 'My trending facets' }}
+          itemComponent={() => <></>}
+        />
+      </InstantSearchTestWrapper>
+    );
+
+    await waitFor(() => {
+      expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.ais-TrendingFacets'))
+        .toMatchInlineSnapshot(`
+        <section
+          class="ais-TrendingFacets"
+        >
+          <h3
+            class="ais-TrendingFacets-title"
+          >
+            My trending facets
+          </h3>
+          <div
+            class="ais-TrendingFacets-container"
+          >
+            <ol
+              class="ais-TrendingFacets-list"
+            >
+              <li
+                class="ais-TrendingFacets-item"
+              />
+              <li
+                class="ais-TrendingFacets-item"
+              />
+            </ol>
+          </div>
+        </section>
+      `);
+    });
+  });
+
+  test('forwards custom class names and `div` props to the root element', () => {
+    const { container } = render(
+      <InstantSearchTestWrapper>
+        <TrendingFacets
+          attribute="attr"
+          itemComponent={() => <></>}
+          className="MyTrendingFacets"
+          classNames={{ root: 'ROOT' }}
+          aria-hidden={true}
+        />
+      </InstantSearchTestWrapper>
+    );
+
+    const root = container.firstChild;
+    expect(root).toHaveClass('MyTrendingFacets', 'ROOT');
+    expect(root).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  test('renders custom layout component', async () => {
+    const client = createRecommendSearchClient({
+      fixture: [
+        { facetName: 'facet1', facetValue: '1' },
+        { facetName: 'facet2', facetValue: '2' },
+      ],
+    });
+    const { container } = render(
+      <InstantSearchTestWrapper searchClient={client}>
+        <TrendingFacets
+          attribute="attr"
+          // This isn't used
+          itemComponent={() => <></>}
+          layoutComponent={({ items }) => (
+            <ul>
+              {items.map((item) => (
+                <li key={item.objectID}>
+                  <p>{item.objectID}</p>
+                </li>
+              ))}
+            </ul>
+          )}
+        />
+      </InstantSearchTestWrapper>
+    );
+
+    await waitFor(() => {
+      expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.ais-TrendingFacets'))
+        .toMatchInlineSnapshot(`
+        <section
+          class="ais-TrendingFacets"
+        >
+          <h3
+            class="ais-TrendingFacets-title"
+          >
+            Trending facets
+          </h3>
+          <ul>
+            <li>
+              <p>
+                facet1:1
+              </p>
+            </li>
+            <li>
+              <p>
+                facet2:2
+              </p>
+            </li>
+          </ul>
+        </section>
+      `);
+    });
+  });
+
+  test('renders Carousel as a layout component', async () => {
+    const client = createRecommendSearchClient({
+      fixture: [
+        { facetName: 'facet1', facetValue: '1' },
+        { facetName: 'facet2', facetValue: '2' },
+      ],
+    });
+    const { container } = render(
+      <InstantSearchTestWrapper searchClient={client}>
+        <TrendingFacets
+          attribute="attr"
+          itemComponent={({ item }) => <p>{item.objectID}</p>}
+          layoutComponent={Carousel}
+        />
+      </InstantSearchTestWrapper>
+    );
+
+    await waitFor(() => {
+      expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.ais-TrendingFacets'))
+        .toMatchInlineSnapshot(`
+        <section
+          class="ais-TrendingFacets"
+        >
+          <h3
+            class="ais-TrendingFacets-title"
+          >
+            Trending facets
+          </h3>
+          <div
+            class="ais-Carousel"
+          >
+            <button
+              aria-controls="ais-Carousel-0"
+              aria-label="Previous"
+              class="ais-Carousel-navigation ais-Carousel-navigation--previous"
+              hidden=""
+              title="Previous"
+            >
+              <svg
+                fill="none"
+                height="16"
+                viewBox="0 0 8 16"
+                width="8"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M7.13809 0.744078C7.39844 1.06951 7.39844 1.59715 7.13809 1.92259L2.27616 8L7.13809 14.0774C7.39844 14.4028 7.39844 14.9305 7.13809 15.2559C6.87774 15.5814 6.45563 15.5814 6.19528 15.2559L0.861949 8.58926C0.6016 8.26382 0.6016 7.73618 0.861949 7.41074L6.19528 0.744078C6.45563 0.418641 6.87774 0.418641 7.13809 0.744078Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </button>
+            <ol
+              aria-label="Items"
+              aria-live="polite"
+              aria-roledescription="carousel"
+              class="ais-Carousel-list ais-TrendingFacets-list"
+              id="ais-Carousel-0"
+              tabindex="0"
+            >
+              <li
+                aria-label="1 of 2"
+                aria-roledescription="slide"
+                class="ais-Carousel-item ais-TrendingFacets-item"
+              >
+                <p>
+                  facet1:1
+                </p>
+              </li>
+              <li
+                aria-label="2 of 2"
+                aria-roledescription="slide"
+                class="ais-Carousel-item ais-TrendingFacets-item"
+              >
+                <p>
+                  facet2:2
+                </p>
+              </li>
+            </ol>
+            <button
+              aria-controls="ais-Carousel-0"
+              aria-label="Next"
+              class="ais-Carousel-navigation ais-Carousel-navigation--next"
+              title="Next"
+            >
+              <svg
+                fill="none"
+                height="16"
+                viewBox="0 0 8 16"
+                width="8"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M0.861908 15.2559C0.601559 14.9305 0.601559 14.4028 0.861908 14.0774L5.72384 8L0.861908 1.92259C0.601559 1.59715 0.601559 1.06952 0.861908 0.744079C1.12226 0.418642 1.54437 0.418642 1.80472 0.744079L7.13805 7.41074C7.3984 7.73618 7.3984 8.26382 7.13805 8.58926L1.80472 15.2559C1.54437 15.5814 1.12226 15.5814 0.861908 15.2559Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+        </section>
+      `);
+    });
+  });
+
+  test('renders Carousel with custom props as a layout component', async () => {
+    const client = createRecommendSearchClient({
+      fixture: [
+        { facetName: 'facet1', facetValue: '1' },
+        { facetName: 'facet2', facetValue: '2' },
+      ],
+    });
+    const { container } = render(
+      <InstantSearchTestWrapper searchClient={client}>
+        <TrendingFacets
+          attribute="attr"
+          itemComponent={({ item }) => <p>{item.objectID}</p>}
+          layoutComponent={(props) => (
+            <Carousel
+              {...props}
+              previousIconComponent={() => <p>Previous</p>}
+              nextIconComponent={() => <p>Next</p>}
+              classNames={{
+                root: 'ROOT',
+                list: cx('LIST', props.classNames.list),
+                item: cx('ITEM', props.classNames.item),
+                navigation: 'NAVIGATION',
+                navigationNext: 'NAVIGATION_NEXT',
+                navigationPrevious: 'NAVIGATION_PREVIOUS',
+              }}
+              translations={{
+                nextButtonLabel: 'NEXT_BUTTON_LABEL',
+                nextButtonTitle: 'NEXT_BUTTON_TITLE',
+                previousButtonLabel: 'PREVIOUS_BUTTON_LABEL',
+                previousButtonTitle: 'PREVIOUS_BUTTON_TITLE',
+                listLabel: 'LIST_LABEL',
+              }}
+            />
+          )}
+        />
+      </InstantSearchTestWrapper>
+    );
+
+    await waitFor(() => {
+      expect(client.getRecommendations).toHaveBeenCalledTimes(1);
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.ais-TrendingFacets'))
+        .toMatchInlineSnapshot(`
+        <section
+          class="ais-TrendingFacets"
+        >
+          <h3
+            class="ais-TrendingFacets-title"
+          >
+            Trending facets
+          </h3>
+          <div
+            class="ais-Carousel ROOT"
+          >
+            <button
+              aria-controls="ais-Carousel-1"
+              aria-label="PREVIOUS_BUTTON_LABEL"
+              class="ais-Carousel-navigation NAVIGATION ais-Carousel-navigation--previous NAVIGATION_PREVIOUS"
+              hidden=""
+              title="PREVIOUS_BUTTON_TITLE"
+            >
+              <p>
+                Previous
+              </p>
+            </button>
+            <ol
+              aria-label="LIST_LABEL"
+              aria-live="polite"
+              aria-roledescription="carousel"
+              class="ais-Carousel-list LIST ais-TrendingFacets-list"
+              id="ais-Carousel-1"
+              tabindex="0"
+            >
+              <li
+                aria-label="1 of 2"
+                aria-roledescription="slide"
+                class="ais-Carousel-item ITEM ais-TrendingFacets-item"
+              >
+                <p>
+                  facet1:1
+                </p>
+              </li>
+              <li
+                aria-label="2 of 2"
+                aria-roledescription="slide"
+                class="ais-Carousel-item ITEM ais-TrendingFacets-item"
+              >
+                <p>
+                  facet2:2
+                </p>
+              </li>
+            </ol>
+            <button
+              aria-controls="ais-Carousel-1"
+              aria-label="NEXT_BUTTON_LABEL"
+              class="ais-Carousel-navigation NAVIGATION ais-Carousel-navigation--next NAVIGATION_NEXT"
+              title="NEXT_BUTTON_TITLE"
+            >
+              <p>
+                Next
+              </p>
+            </button>
+          </div>
+        </section>
+      `);
+    });
+  });
+});
diff --git a/packages/react-instantsearch/src/widgets/__tests__/__utils__/all-widgets.tsx b/packages/react-instantsearch/src/widgets/__tests__/__utils__/all-widgets.tsx
index ea4b7ecdfe..6bb9f1e3f0 100644
--- a/packages/react-instantsearch/src/widgets/__tests__/__utils__/all-widgets.tsx
+++ b/packages/react-instantsearch/src/widgets/__tests__/__utils__/all-widgets.tsx
@@ -96,6 +96,15 @@ function Widget<TWidget extends SingleWidget>({
     case 'LookingSimilar': {
       return <widget.Component objectIDs={['1']} {...props} />;
     }
+    case 'TrendingFacets': {
+      return (
+        <widget.Component
+          attribute="foobar"
+          itemComponent={({ item }) => <div>{item.objectID}</div>}
+          {...props}
+        />
+      );
+    }
     default: {
       return <widget.Component {...props} />;
     }
diff --git a/packages/react-instantsearch/src/widgets/__tests__/all-widgets.test.tsx b/packages/react-instantsearch/src/widgets/__tests__/all-widgets.test.tsx
index 8fbab91543..e01324c5e0 100644
--- a/packages/react-instantsearch/src/widgets/__tests__/all-widgets.test.tsx
+++ b/packages/react-instantsearch/src/widgets/__tests__/all-widgets.test.tsx
@@ -150,6 +150,11 @@ describe('widgets', () => {
           "$$widgetType": "ais.trendingItems",
           "name": "TrendingItems",
         },
+        {
+          "$$type": "ais.trendingFacets",
+          "$$widgetType": "ais.trendingFacets",
+          "name": "TrendingFacets",
+        },
         {
           "$$type": "ais.lookingSimilar",
           "$$widgetType": "ais.lookingSimilar",
diff --git a/packages/react-instantsearch/src/widgets/index.ts b/packages/react-instantsearch/src/widgets/index.ts
index a4316e302a..f7a9c9bb0d 100644
--- a/packages/react-instantsearch/src/widgets/index.ts
+++ b/packages/react-instantsearch/src/widgets/index.ts
@@ -19,4 +19,5 @@ export * from './SortBy';
 export * from './Stats';
 export * from './ToggleRefinement';
 export * from './TrendingItems';
+export * from './TrendingFacets';
 export * from './LookingSimilar';
diff --git a/packages/vue-instantsearch/src/__tests__/common-widgets.test.js b/packages/vue-instantsearch/src/__tests__/common-widgets.test.js
index 6333104c44..4cb023a5a1 100644
--- a/packages/vue-instantsearch/src/__tests__/common-widgets.test.js
+++ b/packages/vue-instantsearch/src/__tests__/common-widgets.test.js
@@ -517,6 +517,9 @@ const testSetups = {
       'FrequentlyBoughtTogether is not supported in Vue InstantSearch'
     );
   },
+  createTrendingFacetsWidgetTests() {
+    throw new Error('TrendingFacets is not supported in Vue InstantSearch');
+  },
   createTrendingItemsWidgetTests() {
     throw new Error('TrendingItems is not supported in Vue InstantSearch');
   },
@@ -618,6 +621,9 @@ const testOptions = {
   createTrendingItemsWidgetTests: {
     skippedTests: { 'TrendingItems widget common tests': true },
   },
+  createTrendingFacetsWidgetTests: {
+    skippedTests: { 'TrendingFacets widget common tests': true },
+  },
   createLookingSimilarWidgetTests: {
     skippedTests: { 'LookingSimilar widget common tests': true },
   },
diff --git a/tests/common/widgets/index.ts b/tests/common/widgets/index.ts
index 0e39a1f480..462ae66fea 100644
--- a/tests/common/widgets/index.ts
+++ b/tests/common/widgets/index.ts
@@ -19,6 +19,7 @@ export * from './stats';
 export * from './numeric-menu';
 export * from './related-products';
 export * from './frequently-bought-together';
+export * from './trending-facets';
 export * from './trending-items';
 export * from './looking-similar';
 export * from './powered-by';
diff --git a/tests/common/widgets/trending-facets/index.ts b/tests/common/widgets/trending-facets/index.ts
new file mode 100644
index 0000000000..236b8bf882
--- /dev/null
+++ b/tests/common/widgets/trending-facets/index.ts
@@ -0,0 +1,24 @@
+import { fakeAct, skippableDescribe } from '../../common';
+
+import { createOptionsTests } from './options';
+
+import type { TestOptions, TestSetup } from '../../common';
+import type { TrendingFacetsWidget } from 'instantsearch.js/es/widgets/trending-facets/trending-facets';
+
+type WidgetParams = Parameters<TrendingFacetsWidget>[0];
+export type TrendingFacetsWidgetSetup = TestSetup<{
+  widgetParams: Omit<WidgetParams, 'container'>;
+}>;
+
+export function createTrendingFacetsWidgetTests(
+  setup: TrendingFacetsWidgetSetup,
+  { act = fakeAct, skippedTests = {} }: TestOptions = {}
+) {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  skippableDescribe('TrendingFacets widget common tests', skippedTests, () => {
+    createOptionsTests(setup, { act, skippedTests });
+  });
+}
diff --git a/tests/common/widgets/trending-facets/options.ts b/tests/common/widgets/trending-facets/options.ts
new file mode 100644
index 0000000000..272330bd6f
--- /dev/null
+++ b/tests/common/widgets/trending-facets/options.ts
@@ -0,0 +1,187 @@
+import { createRecommendSearchClient } from '@instantsearch/mocks/fixtures';
+import { wait } from '@instantsearch/testutils';
+
+import type { TrendingFacetsWidgetSetup } from '.';
+import type { TestOptions } from '../../common';
+
+export function createOptionsTests(
+  setup: TrendingFacetsWidgetSetup,
+  { act }: Required<TestOptions>
+) {
+  describe('options', () => {
+    test('renders with default props', async () => {
+      const searchClient = createRecommendSearchClient({
+        fixture: [{ facetName: 'attr', facetValue: 'value' }],
+      });
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: {
+          attribute: 'name',
+          templates: { item: (item) => item.objectID },
+        },
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(document.querySelector('.ais-TrendingFacets'))
+        .toMatchInlineSnapshot(`
+        <section
+          class="ais-TrendingFacets"
+        >
+          <h3
+            class="ais-TrendingFacets-title"
+          >
+            Trending facets
+          </h3>
+          <div
+            class="ais-TrendingFacets-container"
+          >
+            <ol
+              class="ais-TrendingFacets-list"
+            >
+              <li
+                class="ais-TrendingFacets-item"
+              >
+                attr:value
+              </li>
+            </ol>
+          </div>
+        </section>
+      `);
+    });
+
+    test('renders transformed items', async () => {
+      const searchClient = createRecommendSearchClient({
+        fixture: [
+          { facetName: 'attr', facetValue: 'value' },
+          { facetName: 'attr2', facetValue: 'value2' },
+        ],
+      });
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: {
+          attribute: 'name',
+          templates: { item: (item) => JSON.stringify(item) },
+          transformItems(items) {
+            return items.map((item) => ({
+              ...item,
+              objectID: `(${item.objectID})`,
+            }));
+          },
+        },
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(document.querySelector('.ais-TrendingFacets'))
+        .toMatchInlineSnapshot(`
+        <section
+          class="ais-TrendingFacets"
+        >
+          <h3
+            class="ais-TrendingFacets-title"
+          >
+            Trending facets
+          </h3>
+          <div
+            class="ais-TrendingFacets-container"
+          >
+            <ol
+              class="ais-TrendingFacets-list"
+            >
+              <li
+                class="ais-TrendingFacets-item"
+              >
+                {"objectID":"(attr:value)","attribute":"attr","value":"value","__position":1}
+              </li>
+              <li
+                class="ais-TrendingFacets-item"
+              >
+                {"objectID":"(attr2:value2)","attribute":"attr2","value":"value2","__position":2}
+              </li>
+            </ol>
+          </div>
+        </section>
+      `);
+    });
+
+    test('renders with no results', async () => {
+      const searchClient = createRecommendSearchClient({
+        fixture: [],
+      });
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: {
+          // This simulates receiving no recommendations
+          limit: 0,
+          attribute: 'name',
+          templates: { item: (item) => item.objectID },
+        },
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(document.querySelector('.ais-TrendingFacets'))
+        .toMatchInlineSnapshot(`
+        <section
+          class="ais-TrendingFacets ais-TrendingFacets--empty"
+        >
+          No results
+        </section>
+      `);
+    });
+
+    test('passes parameters correctly', async () => {
+      const searchClient = createRecommendSearchClient({
+        fixture: [
+          { facetName: 'attr', facetValue: 'value' },
+          { facetName: 'attr2', facetValue: 'value2' },
+        ],
+      });
+
+      await setup({
+        instantSearchOptions: {
+          indexName: 'indexName',
+          searchClient,
+        },
+        widgetParams: {
+          attribute: 'name',
+          templates: { item: (item) => item.objectID },
+          threshold: 80,
+          limit: 3,
+        },
+      });
+
+      await act(async () => {
+        await wait(0);
+      });
+
+      expect(searchClient.getRecommendations).toHaveBeenCalledWith(
+        expect.arrayContaining([
+          expect.objectContaining({
+            threshold: 80,
+            maxRecommendations: 3,
+          }),
+        ])
+      );
+    });
+  });
+}
diff --git a/tests/mocks/fixtures/recommendations.ts b/tests/mocks/fixtures/recommendations.ts
index 2f3cd98755..3434acc1dd 100644
--- a/tests/mocks/fixtures/recommendations.ts
+++ b/tests/mocks/fixtures/recommendations.ts
@@ -11,9 +11,15 @@ type Options = {
    * @default false
    */
   minimal?: boolean;
+  /**
+   * The fixture to use for the recommendations.
+   *
+   * @default defaultFixture
+   */
+  fixture?: any[];
 };
 
-const fixture = [
+const defaultFixture = [
   {
     _highlightResult: {
       name: {
@@ -39,7 +45,7 @@ const fixture = [
 ];
 
 export function createRecommendSearchClient(options: Options = {}) {
-  const { minimal = false } = options;
+  const { minimal = false, fixture = defaultFixture } = options;
   return createSearchClient({
     getRecommendations: jest.fn((requests) =>
       Promise.resolve(