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

# UI examples for React InstantSearch

> See a few examples for user interfaces built with React InstantSearch.

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

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

    <ul className="afs-menu" role="listbox">
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/resources/demos/js"><span className="afs-option-name">JavaScript</span><span className="afs-option-lib">InstantSearch.js</span></a></li>
      <li role="option" aria-selected="true"><a className="afs-option is-current" href="/doc/guides/building-search-ui/resources/demos/react"><span className="afs-option-name">React</span><span className="afs-option-lib">React InstantSearch</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/resources/demos/vue"><span className="afs-option-name">Vue</span><span className="afs-option-lib">Vue InstantSearch</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/resources/demos/ios"><span className="afs-option-name">iOS</span><span className="afs-option-lib">InstantSearch iOS</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/guides/building-search-ui/resources/demos/android"><span className="afs-option-name">Android</span><span className="afs-option-lib">InstantSearch Android</span></a></li>
    </ul>
  </div>
</div>

## Ecommerce

<img src="https://mintcdn.com/algolia/WOi5v-PGZrMZ2rOj/images/build-search-ui/demos/e-commerce.png?fit=max&auto=format&n=WOi5v-PGZrMZ2rOj&q=85&s=85cf653f3e839f676fac7a19eb9e2dbf" alt="Screenshot of an ecommerce demo showing a search box, product listings, and a filter panel with categories and brands." width="1645" height="1028" data-path="images/build-search-ui/demos/e-commerce.png" />

* [View demo](https://instantsearchjs.netlify.app/examples/react/e-commerce)
* [View source code](https://github.com/algolia/instantsearch/tree/master/examples/react/e-commerce)
* [View dataset](https://github.com/algolia/datasets/tree/master/ecommerce)

## Default theme

<img src="https://mintcdn.com/algolia/WOi5v-PGZrMZ2rOj/images/build-search-ui/demos/instantsearch-satellite-theme.png?fit=max&auto=format&n=WOi5v-PGZrMZ2rOj&q=85&s=b1c91966cb93b11f968c9da4bf5a116d" alt="Screenshot of a search interface with filter panels on the left and a list of product hits with prices on the right." width="2600" height="3392" data-path="images/build-search-ui/demos/instantsearch-satellite-theme.png" />

* [View demo](https://codesandbox.io/s/github/algolia/instantsearch/tree/master/examples/react/default-theme)
* [View source code](https://github.com/algolia/instantsearch/tree/master/examples/react/default-theme)
* [View dataset](https://github.com/algolia/datasets/tree/master/ecommerce)