You are viewing docs on Elastic's new documentation system, currently in technical preview. For all other Elastic docs, visit

Product Carousels

Build a product carousel with Search UI

Carousels can be used to show groups of products into a row and are typically used to show products within a specific category or tag, like "most popular", "best rated" and "on sale".

In this example, we show a carousel of products within the "TVs" category using the Results component and overriding the view.

You can adjust the number of results returned via the resultsPerPage configuration.

  import { Results, SearchProvider } from "@elastic/react-search-ui";
  import { config } from "./config";

  const CustomResultsView = ({ children }) => {
    return (
      <div className="relative overflow-x-auto">
        <ul className="flex snap-x">{children}</ul>

  const CustomResultView = ({ result }) => {
    return (
        className="py-3 px-3 snap-start hover:text-blue-600"
        style={{ width: "200px" }}
        <a href={result.url.raw}>
            className="object-contain h-48 w-48"
          <h4 className="text-sm truncate">{}</h4>

  export default function ProductCarousel(props) {
    return (
      <SearchProvider config={config}>
        <div className="product-carousel mb-10">
          <h3 className="text-xl leading-8 font-semibold text-slate-700">
          <Results view={CustomResultsView} resultView={CustomResultView} />

Related Articles

Creating Components

Build your own components for Search UI


Search UI React Results Component


Search UI Configuration API

On this page