Search UI
Elastic Stack Serverless
Search UI is a JavaScript library for building modern, customizable search experiences using Elastic as a backend. Maintained by the Elastic team, it helps you implement search interfaces with minimal boilerplate.
As a headless library, Search UI separates logic from presentation. It provides search state and actions you can use with React, vanilla JavaScript, or other frameworks like Vue.
- Elasticsearch: Browser-only implementation
- Elasticsearch: Production-ready implementation, using proxy connector
- Elastic Site Search (Swiftype)
npm install @elastic/search-ui @elastic/react-search-ui @elastic/react-search-ui-views
# or
yarn add @elastic/search-ui @elastic/react-search-ui @elastic/react-search-ui-views
Search UI can connect to Serverless using a backend proxy. In this setup, the frontend uses the ApiProxyConnector to send requests to your backend, which then forwards them to Elasticsearch. Direct browser connections to Serverless are not supported due to CORS restrictions.
See our guide for using Search UI in production for a full example of this setup.
Get started quickly with Search UI and your favorite Elastic product by following one of the tutorials below:
- Elasticsearch
- ⚠️ DEPRECATED Elastic App Search
- ⚠️ DEPRECATED Elastic Workplace Search
Guides for implementing ecommerce use cases using Search UI components.
- Autocomplete: Add real-time query and product suggestions to your search box.
- Product Carousels: Display horizontal lists of products, like 'Best Rated' or 'On Sale'.
- Category Page: Filter and explore products in a specific category using facets.
- Product Detail Page: Enrich product pages with cross-sell suggestions and related items.
- Search Page: Show full search results with options for sorting, filters, and variants.
Quick-start guides for common Search UI tasks like styling, header placement, search behavior, and debugging.
- Using search-as-you-type: Trigger a search request with each keystroke using the
searchAsYouTypeprop. - Adding a search bar to a header: Place a search bar in the site header and redirect queries to a results page.
- Debugging: Enable debug mode to inspect actions and state changes in the browser console.
Learn how to customize component behavior, build your own UI components, connect to any backend, and integrate Search UI with frameworks like Vue and Next.js.
- Conditional Facets: Show or hide facets based on selected filters.
- Changing component behavior: Override default logic using
mapContextToPropsor custom props. - Analyzing performance: Measure and analyze your search experience’s performance using browser and React profiling tools.
- Building a custom connector: Use Search UI with any backend by implementing a connector.
- Next.js integration: Use Search UI with server-side rendering in Next.js apps.
Configuration, state, and actions that power the search experience.
React-specific utilities for accessing and interacting with the Core API.
Search UI includes a set of ready-to-use React components for building your search interface. This section documents each component's API and customization options.
Built-in connectors let Search UI talk to Elastic backends. This section documents how to configure each connector, including usage examples and integration details.
- Elasticsearch Connector: Connect directly to Elasticsearch indices using cloud or self-managed instances.
- Site Search Connector: Use Elastic Site Search as a backend. Note: Some advanced Search UI features are not supported.
- ⚠️ DEPRECATED Workplace Search Connector: Legacy connector for Elastic Workplace Search.
- ⚠️ DEPRECATED App Search Connector: Legacy connector for Elastic App Search.
- ⚠️ DEPRECATED Analytics Plugin: Track user behavior and send events to Elastic Behavioral Analytics.
Thank you to all the contributors! 🙏 🙏