Searchbar

The fastest way to ship a beautiful searchbar.

Etoile searchbar

Drop-in searchbar

The Search component gives you an elegant searchbar out of the box.

import "@etoile-dev/react/styles.css"; // apply default theme (optional)
import { Search } from "@etoile-dev/react";

export default function App() {
return (
  <Search
    apiKey={process.env.NEXT_PUBLIC_ETOILE_PUBLIC_KEY}
    collections={["paintings"]}
  />
);
}

Use your public key for client-side search.

Searchbar props

ParameterTypeDescription
apiKeyrequiredstringYour public API key.
collectionsrequiredstring[]Collections to search.
limitnumberMax results (default: 10).

Custom searchbar

For full control, compose your own searchbar with primitives.

import {
SearchRoot,
SearchInput,
SearchResults,
SearchResult,
} from "@etoile-dev/react";

export default function CustomSearch() {
return (
  <SearchRoot
    apiKey={process.env.NEXT_PUBLIC_ETOILE_PUBLIC_KEY}
    collections={["paintings"]}
    limit={20}
  >
    <SearchInput placeholder="Search paintings..." />

    <SearchResults>
      {(result) => (
        <SearchResult>
          <h3>{result.title}</h3>
          <p>{result.metadata.artist}</p>
        </SearchResult>
      )}
    </SearchResults>
  </SearchRoot>
);
}

Components

  • SearchRoot — Context provider for search state
  • SearchInput — Input with ARIA combobox role
  • SearchResults — Results container with listbox role
  • SearchResult — Individual result with option role

Next