diff --git a/packages/instantsearch-ui-components/src/components/autocomplete/Autocomplete.tsx b/packages/instantsearch-ui-components/src/components/autocomplete/Autocomplete.tsx
new file mode 100644
index 0000000000..e8fe864462
--- /dev/null
+++ b/packages/instantsearch-ui-components/src/components/autocomplete/Autocomplete.tsx
@@ -0,0 +1,35 @@
+/** @jsx createElement */
+
+import { cx } from '../../lib/cx';
+
+import type { ComponentChildren, Renderer } from '../../types';
+
+export type AutocompleteProps = {
+  isOpen: boolean;
+  children?: ComponentChildren;
+  classNames?: Partial<AutocompleteClassNames>;
+};
+
+export type AutocompleteClassNames = {
+  /**
+   * Class names to apply to the root element
+   */
+  root: string | string[];
+};
+
+export function createAutocompleteComponent({ createElement }: Renderer) {
+  return function Autocomplete(userProps: AutocompleteProps) {
+    const { children, isOpen, classNames = {} } = userProps;
+
+    return (
+      <div
+        className={cx('ais-Autocomplete', classNames.root)}
+        role="combobox"
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+      >
+        {children}
+      </div>
+    );
+  };
+}
diff --git a/packages/instantsearch-ui-components/src/components/autocomplete/AutocompleteIndex.tsx b/packages/instantsearch-ui-components/src/components/autocomplete/AutocompleteIndex.tsx
new file mode 100644
index 0000000000..b034ba3deb
--- /dev/null
+++ b/packages/instantsearch-ui-components/src/components/autocomplete/AutocompleteIndex.tsx
@@ -0,0 +1,49 @@
+/** @jsx createElement */
+
+import { cx } from '../../lib/cx';
+
+import type { Renderer } from '../../types';
+
+export type AutocompleteIndexProps<
+  T = { objectID: string } & Record<string, unknown>
+> = {
+  items: T[];
+  ItemComponent: (item: T) => JSX.Element;
+  classNames?: Partial<AutocompleteIndexClassNames>;
+};
+
+export type AutocompleteIndexClassNames = {
+  /**
+   * Class names to apply to the root element
+   **/
+  root: string | string[];
+  /**
+   * Class names to apply to the list element
+   */
+  list: string | string[];
+  /**
+   * Class names to apply to each item element
+   */
+  item: string | string[];
+};
+
+export function createAutocompleteIndexComponent({ createElement }: Renderer) {
+  return function AutocompleteIndex(userProps: AutocompleteIndexProps) {
+    const { items, ItemComponent, classNames = {} } = userProps;
+
+    return (
+      <div className={cx('ais-AutocompleteIndex', classNames.root)}>
+        <ol className={cx('ais-AutocompleteIndexList', classNames.list)}>
+          {items.map((item) => (
+            <li
+              key={item.objectID}
+              className={cx('ais-AutocompleteIndexItem', classNames.item)}
+            >
+              <ItemComponent {...item} />
+            </li>
+          ))}
+        </ol>
+      </div>
+    );
+  };
+}
diff --git a/packages/instantsearch-ui-components/src/components/autocomplete/AutocompletePanel.tsx b/packages/instantsearch-ui-components/src/components/autocomplete/AutocompletePanel.tsx
new file mode 100644
index 0000000000..641c60ca50
--- /dev/null
+++ b/packages/instantsearch-ui-components/src/components/autocomplete/AutocompletePanel.tsx
@@ -0,0 +1,39 @@
+/** @jsx createElement */
+
+import { cx } from '../../lib/cx';
+
+import type { ComponentChildren, Renderer } from '../../types';
+
+export type AutocompletePanelProps = {
+  isOpen: boolean;
+  children?: ComponentChildren;
+  classNames?: Partial<AutocompletePanelClassNames>;
+};
+
+export type AutocompletePanelClassNames = {
+  /**
+   * Class names to apply to the root element
+   */
+  root: string | string[];
+  /**
+   * Class names to apply to the layout element
+   */
+  layout: string | string[];
+};
+
+export function createAutocompletePanelComponent({ createElement }: Renderer) {
+  return function AutocompletePanel(userProps: AutocompletePanelProps) {
+    const { children, isOpen, classNames = {} } = userProps;
+
+    return (
+      <div
+        className={cx('ais-AutocompletePanel', classNames.root)}
+        hidden={!isOpen}
+      >
+        <div className={cx('ais-AutocompletePanelLayout', classNames.layout)}>
+          {children}
+        </div>
+      </div>
+    );
+  };
+}
diff --git a/packages/instantsearch-ui-components/src/components/autocomplete/index.ts b/packages/instantsearch-ui-components/src/components/autocomplete/index.ts
new file mode 100644
index 0000000000..daf5e34679
--- /dev/null
+++ b/packages/instantsearch-ui-components/src/components/autocomplete/index.ts
@@ -0,0 +1,3 @@
+export * from './Autocomplete';
+export * from './AutocompleteIndex';
+export * from './AutocompletePanel';
diff --git a/packages/instantsearch-ui-components/src/components/index.ts b/packages/instantsearch-ui-components/src/components/index.ts
index 7b8e46a147..b34f76a53f 100644
--- a/packages/instantsearch-ui-components/src/components/index.ts
+++ b/packages/instantsearch-ui-components/src/components/index.ts
@@ -1,3 +1,4 @@
+export * from './autocomplete';
 export * from './Carousel';
 export * from './chat/Chat';
 export * from './chat/ChatHeader';
diff --git a/packages/react-instantsearch/src/components/Autocomplete.tsx b/packages/react-instantsearch/src/components/Autocomplete.tsx
index ecce449281..89d8da9e9e 100644
--- a/packages/react-instantsearch/src/components/Autocomplete.tsx
+++ b/packages/react-instantsearch/src/components/Autocomplete.tsx
@@ -1,10 +1,31 @@
-import React from 'react';
-import { Index } from 'react-instantsearch-core';
+import {
+  createAutocompleteComponent,
+  createAutocompleteIndexComponent,
+  createAutocompletePanelComponent,
+} from 'instantsearch-ui-components';
+import React, { createElement, useState, Fragment } from 'react';
+import { Index, useHits } from 'react-instantsearch-core';
 
-import { Hits, SearchBox } from '../widgets';
+import { SearchBox } from '../widgets/SearchBox';
 
+import type { Pragma } from 'instantsearch-ui-components';
 import type { BaseHit, Hit } from 'instantsearch.js';
 
+const Autocomplete = createAutocompleteComponent({
+  createElement: createElement as Pragma,
+  Fragment,
+});
+
+const AutocompletePanel = createAutocompletePanelComponent({
+  createElement: createElement as Pragma,
+  Fragment,
+});
+
+const AutocompleteIndex = createAutocompleteIndexComponent({
+  createElement: createElement as Pragma,
+  Fragment,
+});
+
 type IndexConfig<TItem extends Hit<BaseHit> = Hit<BaseHit>> = {
   indexName: string;
   getQuery?: (item: TItem) => string;
@@ -17,14 +38,38 @@ export type AutocompleteProps = {
 };
 
 export function EXPERIMENTAL_Autocomplete({ indices }: AutocompleteProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
   return (
     <Index EXPERIMENTAL_isolated>
-      <SearchBox />
-      {indices.map((index) => (
-        <Index key={index.indexName} indexName={index.indexName}>
-          <Hits hitComponent={({ hit }) => <index.itemComponent {...hit} />} />
-        </Index>
-      ))}
+      <Autocomplete isOpen={isOpen}>
+        <SearchBox onFocus={() => setIsOpen(true)} />
+        <AutocompletePanel isOpen={isOpen}>
+          {indices.map((index) => (
+            <Index key={index.indexName} indexName={index.indexName}>
+              <AutocompleteIndexComponent itemComponent={index.itemComponent} />
+            </Index>
+          ))}
+        </AutocompletePanel>
+      </Autocomplete>
     </Index>
   );
 }
+
+type AutocompleteIndexProps = {
+  itemComponent: IndexConfig['itemComponent'];
+};
+
+function AutocompleteIndexComponent({
+  itemComponent: ItemComponent,
+}: AutocompleteIndexProps) {
+  const { items } = useHits();
+
+  return (
+    <AutocompleteIndex
+      // @ts-expect-error - there seems to be problems with React.ComponentType and this, but it's actually correct
+      ItemComponent={ItemComponent}
+      items={items}
+    />
+  );
+}
diff --git a/packages/react-instantsearch/src/components/__tests__/Autocomplete.test.tsx b/packages/react-instantsearch/src/components/__tests__/Autocomplete.test.tsx
index 7f7becbd56..297bfd09a5 100644
--- a/packages/react-instantsearch/src/components/__tests__/Autocomplete.test.tsx
+++ b/packages/react-instantsearch/src/components/__tests__/Autocomplete.test.tsx
@@ -35,7 +35,7 @@ describe('Autocomplete', () => {
 
   test('should render a searchbox and indices with hits', async () => {
     const searchClient = createMockedSearchClient();
-    render(
+    const { container } = render(
       <InstantSearchTestWrapper searchClient={searchClient}>
         <EXPERIMENTAL_Autocomplete
           indices={[
@@ -52,8 +52,145 @@ describe('Autocomplete', () => {
       </InstantSearchTestWrapper>
     );
 
-    expect(await screen.findByText('Item 1')).toBeInTheDocument();
-    expect(await screen.findByText('hello')).toBeInTheDocument();
-    expect(screen.getByRole('searchbox')).toBeInTheDocument();
+    await screen.findByText('Item 1');
+
+    expect(screen.getByRole('search')).toMatchInlineSnapshot(`
+      <form
+        action=""
+        class="ais-SearchBox-form"
+        novalidate=""
+        role="search"
+      >
+        <input
+          aria-label="Search"
+          autocapitalize="off"
+          autocomplete="off"
+          autocorrect="off"
+          class="ais-SearchBox-input"
+          maxlength="512"
+          placeholder=""
+          spellcheck="false"
+          type="search"
+          value=""
+        />
+        <button
+          class="ais-SearchBox-submit"
+          title="Submit the search query"
+          type="submit"
+        >
+          <svg
+            aria-hidden="true"
+            class="ais-SearchBox-submitIcon"
+            height="10"
+            viewBox="0 0 40 40"
+            width="10"
+          >
+            <path
+              d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
+            />
+          </svg>
+        </button>
+        <button
+          class="ais-SearchBox-reset"
+          hidden=""
+          title="Clear the search query"
+          type="reset"
+        >
+          <svg
+            aria-hidden="true"
+            class="ais-SearchBox-resetIcon"
+            height="10"
+            viewBox="0 0 20 20"
+            width="10"
+          >
+            <path
+              d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
+            />
+          </svg>
+        </button>
+        <span
+          class="ais-SearchBox-loadingIndicator"
+          hidden=""
+        >
+          <svg
+            aria-hidden="true"
+            aria-label="Results are loading"
+            class="ais-SearchBox-loadingIcon"
+            height="16"
+            stroke="#444"
+            viewBox="0 0 38 38"
+            width="16"
+          >
+            <g
+              fill="none"
+              fill-rule="evenodd"
+            >
+              <g
+                stroke-width="2"
+                transform="translate(1 1)"
+              >
+                <circle
+                  cx="18"
+                  cy="18"
+                  r="18"
+                  stroke-opacity=".5"
+                />
+                <path
+                  d="M36 18c0-9.94-8.06-18-18-18"
+                >
+                  <animatetransform
+                    attributeName="transform"
+                    dur="1s"
+                    from="0 18 18"
+                    repeatCount="indefinite"
+                    to="360 18 18"
+                    type="rotate"
+                  />
+                </path>
+              </g>
+            </g>
+          </svg>
+        </span>
+      </form>
+    `);
+
+    expect(container.querySelector('.ais-AutocompletePanel'))
+      .toMatchInlineSnapshot(`
+      <div
+        class="ais-AutocompletePanel"
+        hidden=""
+      >
+        <div
+          class="ais-AutocompletePanelLayout"
+        >
+          <div
+            class="ais-AutocompleteIndex"
+          >
+            <ol
+              class="ais-AutocompleteIndexList"
+            >
+              <li
+                class="ais-AutocompleteIndexItem"
+              >
+                Item 1
+              </li>
+            </ol>
+          </div>
+          <div
+            class="ais-AutocompleteIndex"
+          >
+            <ol
+              class="ais-AutocompleteIndexList"
+            >
+              <li
+                class="ais-AutocompleteIndexItem"
+              >
+                hello
+              </li>
+            </ol>
+          </div>
+        </div>
+      </div>
+    `);
   });
 });
diff --git a/packages/react-instantsearch/src/components/index.ts b/packages/react-instantsearch/src/components/index.ts
index c0ab19964d..f54648c28b 100644
--- a/packages/react-instantsearch/src/components/index.ts
+++ b/packages/react-instantsearch/src/components/index.ts
@@ -1 +1,2 @@
 export * from './Carousel';
+export * from './Autocomplete';