SEARCH UI

The shortcut to a complete search UI

Create search interfaces and configurable search components with just a few lines of code. Build fully customizable search experiences with rich filtering capabilities that help your users find exactly what they need.

Try Search UI
videoImage

Learn how to add rich, relevant search to your apps and websites with Elastic.

Watch video

Get started using Search UI to build modern search experiences.

See documentation

The search experience on your website is often the key driver of visitor satisfaction. Learn more on how to increase website engagement.

Read blog

Flexible

Ready to React

Search UI is designed to work with React without any configuration, with pre-built connectors for Elastic App Search and Elastic Site Search. Download and import, it’s that simple.

npm install --save @elastic/react-search-ui @elastic/search-ui-app-search-connector

const connector = new AppSearchAPIConnector({
    searchKey: "search-soaewu2ye6uc45dr8mcd54v8",
    engineName: "national-parks-demo",
    hostIdentifier: "host-2376rb"
  });

  export default function App() {
    return (
      <SearchProvider
        config={{
          apiConnector: connector
        }}
      >
        {() => (
          <div className="App">
            <SearchBox />
            <Results
              titleField="title"
              urlField="nps_link"
            />
          </div>
        )}
      </SearchProvider>
    );
  }

FEATURES

Prebuilt with Search UI

Add popular, out-of-the-box search features to frontend search applications that help users get to accurate results faster. Quickly implement search UX best practices.

  • Search-as-you-type

    Add search-as-you-type fields that match to queries to find users quick answers.

  • Filtering, faceting, sorting

    Let users narrow down search results manually to match their criteria.

  • Pagination and highlighting

    Make search results easier to parse with auto-paginated search results and emphasized, matching search terms.

  • Typeahead

    Use language prediction tooling to provide suggestions to users as they type queries.

Get Started Quickly

Simple, flexible, powerful

Build search interfaces with a range of mobile-friendly components – all customizable to your exact use case.

  • Ready in 5 minutes

    Download, select your components, and add a few lines of code to your application.

  • Open source, fully customizable

    Every component can be styled and modified to create uniquely immersive experiences. And it's all open source.

  • Flexible front-end

    Leverage the framework's logic and extend it with your own components.

  • URL synchronization

    Filters, queries, pagination, and all query parameters are automatically captured in the URL for an optimal user experience.

  • Interoperable

    Search UI can be used with any search service, and includes prebuilt connectors for Elasticsearch.

  • React, vanilla, and beyond

    Written completely in Typescript, the underlying library powering Search UI can be used with any JavaScript framework.

Try it now on Elastic Cloud

Spin up a fully loaded deployment on the cloud provider you choose. As the company behind Elasticsearch, we bring our features and support to your Elastic clusters in the cloud.

Start free trial