Overview »
Elastic Docs ›Search UI

Search UI

edit

Search UI

edit

A JavaScript library for the fast development of modern, engaging search experiences with Elastic. Get up and running quickly without re-inventing the wheel.

Features 👍

edit
  • You know, for search - Maintained by Elastic, the team behind Elasticsearch.
  • Speedy Implementation - Build a complete search experience with a few lines of code.
  • Customizable - Tune the components, markup, styles, and behaviors to your liking.
  • Smart URLs - Searches, paging, filtering, and more, are captured in the URL for direct result linking.
  • Flexible front-end - Not just for React. Use with any JavaScript library, even vanilla JavaScript.
  • Flexible back-end - Use it with Elasticsearch, Elastic Enterprise Search, or any other search API.

Live demos 👀

edit

Connectors

edit

Examples

edit

Get Started 🌟

edit

Installation

edit
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

Tutorials

edit

Get started quickly with Search UI and your favorite Elastic product by following one of the tutorials below:

Use Cases 🛠️

edit

Ecommerce

edit

Search UI works great in the ecommerce use-case. Check out our ecommerce guide that includes demo and code examples, as well as general guidance for ecommerce search.

FAQ 🔮

edit

Is Search UI only for React?

edit

Search UI is "headless". You can use vanilla JavaScript or write support for it into any JavaScript framework.

Read about the search-ui package for more information, or check out the Vue.js Example.

Can I use my own styles?

edit

You can!

Read the Custom Styles and Layout Guide to learn more, or check out the Seattle Indies Expo Demo.

Can I build my own Components?

edit

Yes! Absolutely.

Check out the Build Your Own Component Guide.

Does Search UI only work with App Search?

edit

Nope! We do have two first party connectors: Site Search and App Search.

But Search UI is headless. You can use any Search API.

Read the Building a custom connector to learn more about building your own connector for your API.

How do I use this with Elasticsearch?

edit

Read the Elasticsearch Connector docs.

Where do I report issues with the Search UI?

edit

If something is not working as expected, please open an issue.

Where can I go to get help?

edit

The Enterprise Search team at Elastic maintains this library and are happy to help. Try posting your question to the Elastic Enterprise Search discuss forums. Be sure to mention that you’re using Search UI and also let us know what backend your using; whether it’s App Search, Site Search, Elasticsearch, or something else entirely.

Contribute 🚀

edit

We welcome contributors to the project. Before you begin, a couple notes…​

  • Read the Search UI Contributor’s Guide.

  • Prior to opening a pull request, please:

    • Create an issue to discuss the scope of your proposal.
    • Sign the Contributor License Agreement. We are not asking you to assign copyright to us, but to give us the right to distribute your code without restriction. We ask this of all contributors in order to assure our users of the origin and continuing existence of the code. You only need to sign the CLA once.
  • Please write simple code and concise documentation, when appropriate.

License 📗

edit

Apache-2.0 © Elastic

Thank you to all the contributors! 🙏 🙏

Overview »